Vue.js頁面中有多個input搜索框如何實現(xiàn)防抖操作
debounce簡介
debounce是lodash工具庫中的一個非常好用的函數(shù)。在實現(xiàn)搜索框?qū)斎脒M(jìn)行動態(tài)查詢的時候,我們需要防止前端頻繁的發(fā)送查詢請求給后端,這個時候就需要用到debounce,它可以設(shè)置一個時間間隔,比如300ms,忽略300毫秒內(nèi)的輸入變化。debounce的詳細(xì)介紹可以參考 這篇 文章。
debounce的高級用法
博主的頁面中有3個搜索框,每個搜索框都需要動態(tài)響應(yīng)用戶的輸入到后臺去查詢匹配的文章,如下圖:
在Vue.js中如何實現(xiàn)多搜索框的debounce綁定,下面博主就帶大家一起來看一下:
1. 監(jiān)聽輸入變量
上圖,可以看到我有3個輸入框,每個輸入框都需要設(shè)置一個變量來保存用戶的輸入:
data () { return { // 可用的文章列表 columnItems: [], // 是否正在加載 isLoading: [false, false, false], // 選擇框搜索輸入的值 searchColumn1: '', searchColumn2: '', searchColumn3: '' } },
接下來,我們把輸入變量綁定到輸入框上面。博主這里使用的是vuetify的combobox,如果使用html原生的input框或者其他框架的input元素,此處請稍作修改:
<label>推薦專欄1</label> <v-combobox :items="columnItems" :loading="isLoading[0]" :search-input.sync="searchColumn1" ... > ... </v-combobox> <label>推薦專欄2</label> <v-combobox :items="columnItems" :loading="isLoading[1]" :search-input.sync="searchColumn2" ... > ... </v-combobox> <label>推薦專欄3</label> <v-combobox :items="columnItems" :loading="isLoading[2]" :search-input.sync="searchColumn3" ... > ... </v-combobox>
然后,我還需要監(jiān)聽這幾個變量,如果發(fā)生改變則調(diào)用ajax進(jìn)行后臺查詢:
watch: { searchColumn1 (val) { this.getColumns(val, 0) }, searchColumn2 (val) { this.getColumns(val, 1) }, searchColumn3 (val) { this.getColumns(val, 2) } }, ... methods: { getColumns: function (searchValue, index) { // Items have already been requested if (this.isLoading[index]) return this.isLoading[index] = true let vm = this let options = { page: 1 } if (searchValue) { options.title = searchValue.trim() } else { vm.columnItems = [] vm.isLoading[index] = false return } // console.log(options) vm.$store.dispatch('getAllColumns', options).then(function (columns) { if (columns && columns.length) { vm.columnItems = columns } vm.isLoading[index] = false }) } }
2. 添加debounce綁定
到目前為止,我們都還沒有添加debounce,上面的邏輯也完全走的通,但是運行后你會發(fā)現(xiàn)輸入操作運行的不流暢,如果打開dev-tools查看后臺調(diào)用,你會發(fā)現(xiàn)用戶輸入后出發(fā)了一長串的ajax調(diào)用。因此我們引入debounce。此處,我們只需把含有ajax調(diào)用的函數(shù)提交給debounce,告訴它對getColumns()函數(shù)進(jìn)行防抖操作。而在何處調(diào)用debounce則是非常有講究的,錯誤的引入位置會使得debounce不起作用。請記住,debounce需要在created()鉤子中引入。
import _ from 'lodash' ... created: function () { this.getColumns = _.debounce(this.getColumns, 500) },
最后,博主想拋出一個小問題:“為什么一定要在created()鉤子中調(diào)用debounce呢,mounted()或者其他的地方為什么不可以呢?”,請知道的同學(xué)留言或者發(fā)評論給我吧!
轉(zhuǎn)自:https://www.bloghome.com.cn/user/xionghaizi
作者: 熊孩子
相關(guān)文章
vue轉(zhuǎn)electron項目及解決使用fs報錯:Module?not?found:?Error:?Can&apo
這篇文章主要給大家介紹了關(guān)于vue轉(zhuǎn)electron項目及解決使用fs報錯:Module?not?found:?Error:?Can‘t?resolve?‘fs‘?in的相關(guān)資料,文中通過圖文以及實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11vue的無縫滾動組件vue-seamless-scroll實例
本篇文章主要給大家講解了vue的無縫滾動組件vue-seamless-scroll的用法,需要的朋友參考學(xué)習(xí)下吧。2017-12-12vue項目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決
這篇文章主要介紹了vue項目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02vue el-date-picker 開始日期不能大于結(jié)束日期的實現(xiàn)代碼
這篇文章主要介紹了vue el-date-picker 開始日期不能大于結(jié)束日期的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01解決axios post 后端無法接收數(shù)據(jù)的問題
今天小編就為大家分享一篇解決axios post 后端無法接收數(shù)據(jù)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10vue項目中更改名字和圖標(biāo)的簡單實現(xiàn)步驟
今天在寫vue項目時碰到的問題是怎么修改vue的網(wǎng)頁圖標(biāo),所以下面這篇文章主要給大家介紹了關(guān)于vue項目中更改名字和圖標(biāo)的簡單實現(xiàn),文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08解決vue-cli項目開發(fā)運行時內(nèi)存暴漲卡死電腦問題
最近開發(fā)一個vue項目時遇到電腦卡死問題,突然間系統(tǒng)就非???,然后卡著卡著就死機(jī)了,鼠標(biāo)也動不了了,只能冷啟動。這篇文章主要介紹了vue-cli項目開發(fā)運行時內(nèi)存暴漲卡死電腦問題,需要的朋友可以參考下2019-10-10Antd-vue Table組件添加Click事件,實現(xiàn)點擊某行數(shù)據(jù)教程
這篇文章主要介紹了Antd-vue Table組件添加Click事件,實現(xiàn)點擊某行數(shù)據(jù)教程,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11