vue函数input输入值请求时延迟1.5秒请求问题

vue函数input输入值请求时延迟1.5秒请求

做了一个input输入值后，延迟一段时间自动根据输入内容搜索功能

目的：避免当用户连续输入连续请求接口的问题，达到当用户输入完成之后再请求。

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延迟

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。