Vuetify:油门/反跳v自动完成 [英] Vuetify : throttle / debounce v-autocomplete
问题描述
我正在使用带有远程数据的Vuetify自动完成功能,并且我希望限制/消除API调用(当用户在自动完成功能中键入文本时,等待500毫秒以调用API)。我该怎么做?
I'm using the Vuetify Autocomplete with remote data, and I would like to to throttle / debounce the API calls (wait 500 ms to call the API when the user is typing text in the autocomplete). How can I do that?
我看到了有关 debounce-search
属性的Stack OverFlow帖子,但没有
I saw a Stack OverFlow post about the debounce-search
attribute, but it didn't work for me, and I didn't see any Vuetify documentation on this attribute.
推荐答案
您可以在此属性上添加反跳功能进行API调用的函数。可以使用 setTimeout 实现防抖code>
和 clearTimeout
,这样,新呼叫将被延迟并取消任何未决呼叫:
You could add debouncing to the function that makes the API calls. A debouncer could be implemented with setTimeout
and clearTimeout
, such that new calls are delayed and cancels any pending call:
methods: {
fetchEntriesDebounced() {
// cancel pending call
clearTimeout(this._timerId)
// delay new call 500ms
this._timerId = setTimeout(() => {
this.fetch()
}, 500)
}
}
这种方法可以绑定到 上的html#Watchers rel = noreferrer>观察者
v的搜索输入
道具-autocomplete :
Such a method could be bound to a watcher on the search-input
prop of v-autocomplete
:
<template>
<v-autocomplete :search-input.sync="search" />
</template>
<script>
export default {
data() {
return {
search: null
}
},
watch: {
search (val) {
if (!val) {
return
}
this.fetchEntriesDebounced()
}
},
methods: { /* ... */ }
}
</script>
这篇关于Vuetify:油门/反跳v自动完成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!