vue函数input输入值请求时延迟1.5秒请求问题
作者：Hesper_Pan
这篇文章主要介绍了vue函数input输入值请求时延迟1.5秒请求问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue函数input输入值请求时延迟1.5秒请求
做了一个input输入值后，延迟一段时间自动根据输入内容搜索功能
目的：避免当用户连续输入连续请求接口的问题，达到当用户输入完成之后再请求。
<el-form-item >
<el-input
v-model="formSearch.Num"
clearable
:placeholder="locale('dd.Num')"
/>
</el-form-item>export default {
components: {},
data() {
return {
formSearch: {
Num: '',
timer: null
}
};
},
watch: {
'formSearch.Num': {
handler(value) {
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
this.handleFormSearch();
}, 1500)
},
deep: true
}
},
methods: {
locale,
handleFormSearch() {
//查询方法
}
}
};vue页面许多input框会导致输入延迟
做项目的时候第一次遇到这个问题（layui+vue），先来看我出现的问题，如图一我页面上有个双重for循环，且里面还使用到了过滤器见图二，这样下来我页面的数据量一旦非常大，对v-model是很不友好的，会造成v-model渲染会很慢
最好的解决方法要么是把这些for循环做的事去让后端处理，前端只做数据的展示，再要么就是在v-model上改成 v-model.lazy(我用的这个方法)让v-model延迟
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。