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