如何让Vue的输入框输入完成后发起网络请求

input输入内容时延时请求

为了解决当用户输入内容时连续发起网络请求，使用户输入完毕后再发起请求。

函数防抖

<el-input 
  v-model="selectName"
  placeholder="请输入姓名查找"
  size="mini"
  class="select-styl"
></el-input>

在用户输入内容的时候，将输入内容selectName进行双向绑定到配置中

data () {
  return {
    selectName: null
  }
},

在watch中对selectName进行监听，当值发生改变的时候，并不是直接发起网络请求，而是设置一个延时器，当值发生改变时，延迟0.5秒再发起网络请求，这样就能实现输入框防抖功能，使用户体验更好。

watch: {
  selectName (curVal, oldVal) {
  // 实现input连续输入，只发一次请求
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => {
      this.handleChangeName(curVal)
    }, 500)
  }
},

handleChangeName (value) {
  if (value === '') {
    return false;
  }
  console.log(value)
}

————————————————
原文链接：https://blog.csdn.net/tangkthh/article/details/92679882