vue函數(shù)input輸入值請求時延遲1.5秒請求問題
更新時間：2023年04月23日 09:59:54 作者：Hesper_Pan
這篇文章主要介紹了vue函數(shù)input輸入值請求時延遲1.5秒請求問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue函數(shù)input輸入值請求時延遲1.5秒請求
做了一個input輸入值后，延遲一段時間自動根據(jù)輸入內(nèi)容搜索功能
目的：避免當用戶連續(xù)輸入連續(xù)請求接口的問題，達到當用戶輸入完成之后再請求。
<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），先來看我出現(xiàn)的問題，如圖一我頁面上有個雙重for循環(huán)，且里面還使用到了過濾器見圖二，這樣下來我頁面的數(shù)據(jù)量一旦非常大，對v-model是很不友好的，會造成v-model渲染會很慢
最好的解決方法要么是把這些for循環(huán)做的事去讓后端處理，前端只做數(shù)據(jù)的展示，再要么就是在v-model上改成 v-model.lazy(我用的這個方法)讓v-model延遲
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue3聲明字段名為枚舉的類型方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Django與Vue語法的沖突問題完美解決方法，本文給大家分享了兩種解決方法，需要的朋友參考下吧2017-12-12
Vue項目打包問題詳解(生產(chǎn)環(huán)境樣式失效)
在Vue開發(fā)過程中,項目的打包是一個非常重要的步驟,下面這篇文章主要給大家介紹了關于Vue項目打包問題(生產(chǎn)環(huán)境樣式失效)的相關資料,文中介紹的非常詳細,需要的朋友可以參考下2023-12-12
vue-cli腳手架打包靜態(tài)資源請求出錯的原因與解決
這篇文章主要給大家介紹了關于vue-cli腳手架打包靜態(tài)資源請求出錯的原因與解決方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue-cli具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
在本篇文章里小編給大家整理的是關于Vue開發(fā)中遇到的跨域問題及解決方法，需要的朋友們可以學習下。2020-02-02
這篇文章主要介紹了vue-element的select下拉框賦值實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue3使用wangeditor封裝和自定義上傳文件官方教程
這篇文章主要為大家介紹了vue3使用wangeditor封裝和自定義上傳文件的官方教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-06-06
Vue3 Echarts通用的折線圖帶陰影效果實現(xiàn)
在環(huán)保倉管項目中,做了一個每月對藥品、消耗品、設備的進出,進行統(tǒng)計百分比,效果好看,后面經(jīng)常在用這個樣式,下面通過示例代碼分享Vue3 Echarts通用的折線圖帶陰影效果實現(xiàn),感興趣的朋友一起看看吧2024-07-07
使用Vue3和Plotly.js繪制動態(tài)3D圖表的示例代碼
在數(shù)據(jù)可視化應用中,需要將數(shù)據(jù)動態(tài)加載到圖表中并進行實時更新,本文將展示如何使用Plotly.js和Vue.js實現(xiàn)這一功能,從加載外部數(shù)據(jù)到創(chuàng)建交互式圖表,文中有相關的代碼示例供大家參考,需要的朋友可以參考下2024-06-06
本文主要介紹了vue項目運行時出現(xiàn)It works的問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07