如何让Vue的输入框输入完成后发起网络请求
input输入内容时延时请求为了解决当用户输入内容时连续发起网络请求,使用户输入完毕后再发起请求。函数防抖<el-inputv-model="selectName"placeholder="请输入姓名查找"size="mini"class="select-styl"></el-input>在用户输入内容的时候,将输入内容selectNa...
·
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
更多推荐
已为社区贡献2条内容
所有评论(0)