如何让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

最后

以上就是魁梧保温杯为你收集整理的如何让Vue的输入框输入完成后发起网络请求的全部内容，希望文章能够帮你解决如何让Vue的输入框输入完成后发起网络请求所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。