vue函数input输入值请求时延迟1.5秒请求问题
更新时间：2023年04月23日 09:59:54 作者：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延迟
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue3声明字段名为枚举的类型方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Django与Vue语法的冲突问题完美解决方法，本文给大家分享了两种解决方法，需要的朋友参考下吧2017-12-12
在Vue开发过程中,项目的打包是一个非常重要的步骤,下面这篇文章主要给大家介绍了关于Vue项目打包问题(生产环境样式失效)的相关资料,文中介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要给大家介绍了关于vue-cli脚手架打包静态资源请求出错的原因与解决方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-cli具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
在本篇文章里小编给大家整理的是关于Vue开发中遇到的跨域问题及解决方法，需要的朋友们可以学习下。2020-02-02
这篇文章主要介绍了vue-element的select下拉框赋值实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
vue3使用wangeditor封装和自定义上传文件官方教程
这篇文章主要为大家介绍了vue3使用wangeditor封装和自定义上传文件的官方教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-06-06
在环保仓管项目中,做了一个每月对药品、消耗品、设备的进出,进行统计百分比,效果好看,后面经常在用这个样式,下面通过示例代码分享Vue3 Echarts通用的折线图带阴影效果实现,感兴趣的朋友一起看看吧2024-07-07
在数据可视化应用中,需要将数据动态加载到图表中并进行实时更新,本文将展示如何使用Plotly.js和Vue.js实现这一功能,从加载外部数据到创建交互式图表,文中有相关的代码示例供大家参考,需要的朋友可以参考下2024-06-06
本文主要介绍了vue项目运行时出现It works的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
最新评论