Vuetify:油门/反跳v自动完成 [英] Vuetify : throttle / debounce v-autocomplete

查看:170
本文介绍了Vuetify:油门/反跳v自动完成的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用带有远程数据的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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆