Vuetify : 스로틀/차단 v-autocomplete

Vuetify : 스로틀/차단 v-autocomplete

원격 데이터와 함께 Vuetify 자동 완성 기능을 사용하고 있는데 API 호출을 제한/해제하고 싶다(500ms 동안 사용자가 자동 완성에서 텍스트를 입력할 때 API를 호출하십시오).내가 어떻게 그럴 수 있을까?

Stack OverFlow라는 게시물이debounce-search속성, 하지만 내게는 효과가 없었고, 이 속성에 대한 어떤 Vuetify 문서도 보지 못했다.

API 호출을 하는 기능에 디버깅을 추가할 수 있다.신규 통화가 지연되고 보류 중인 모든 통화를 취소하는 등 디베이트가 및 와 함께 이행될 수 있다.

methods: {
  fetchEntriesDebounced() {
    // cancel pending call
    clearTimeout(this._timerId)

    // delay new call 500ms
    this._timerId = setTimeout(() => {
      this.fetch()
    }, 500)
  }
}

그런 방법은 의 소견으로 감시자에게 속박될 수도 있었다.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>

데모를 하다

정말 감사합니다.그건 효과가 있다.여기 내 코드(어드레스 지오코딩)가 있다.

<v-autocomplete
        ref="refCombobox"
        v-model="adresseSelectionnee"
        :items="items"
        :loading="isLoading"
        :search-input.sync="search"
        no-filter
        hide-details
        hide-selected
        item-text="full"
        item-value="address"
        placeholder="Où ?"
        append-icon="search"
        return-object
        dense
        solo
        class="caption"
        clearable
        hide-no-data
      ></v-autocomplete>


watch: {

    search(val) {
      if (!val) {
        return;
      }

      this.geocodeGoogle(val);
    }
  },



methods: {
    geocodeGoogle(val) {
      // cancel pending call
      clearTimeout(this._timerId);

      this.isLoading = true;

      // delay new call 500ms
      this._timerId = setTimeout(() => {
        const geocoder = new this.$google.maps.Geocoder();
        geocoder.geocode({ address: val, region: "FR" }, (results, status) => {
          if (status === "OK") {
            this.adressesGoogle = results;
            this.isLoading = false;
          } else {               
            this.isLoading = false;
          }
        });
      }, 500);
    },

참조URL: https://stackoverflow.com/questions/56821337/vuetify-throttle-debounce-v-autocomplete