javascript - Lodash Debounce Vue Js 与 Buefy 自动完成

Question

我正在将 Vuejs cdn 与 buefy、axios 和 loadash 一起使用，我正在尝试使用 _.debounce，所以我不会使用 Buefy 自动完成和我发送的查询调用 API 太多次，我知道了工作但自动完成没有显示结果，因为当我不使用去抖动时，所以我的部分如下:

自动完成 HTML:

<b-autocomplete
   v-model="AirportDestinationName"
   :data="airports"
   placeholder="Ciudad de destino"
   field="code"
   icon="map-marker-alt"
   :loading="isFetching"
   @input="getAsyncData(AirportDestinationName)"
   @select="option => AirportDestinationSelected = option">
       <template slot-scope="props">
       <strong>(@{{ props.option.code }})</strong> - @{{props.option.name}} - 
       @{{props.option.country_name}}
       </template>
</b-autocomplete>

我没有去抖动的方法是有效的:

getAsyncData(query) {
      if(query.length>1){
            this.airports = []
            this.isFetching = true
                axios.get(`https://iatacodes.org/api/v6/autocomplete?api_key=xxxxxxxxsomekeyxxxxxxxxxxxxxxxx&query=${query}`)
                    .then(data => {
                        data.data.response.airports.forEach((item) => this.airports.push(item))
                        this.isFetching = false
                    })
                    .catch(error => {
                        this.isFetching = false
                        throw error
                    })
              }


        }

然后我使用 debounce 函数，但是当我用它替换其他函数时，自动完成没有生成下拉列表，这很奇怪，因为示例与我使用的相同:

GotoDeb: _.debounce((query)=>{
                console.log(query)
                this.airports = []
                this.isFetching = true
                    axios.get(`https://iatacodes.org/api/v6/autocomplete?api_key=xxxxxxxxsomekeyxxxxxxxxxxxxxxxx&query=${query}`)
                        .then(data => {
                            data.data.response.airports.forEach((item) => this.airports.push(item))
                            this.isFetching = false
                        })
                        .catch(error => {
                            this.isFetching = false
                            throw error
                        })
                console.log(this.airports)
                console.log('fetched')
              },500)

其他一切正常，我没有从服务器或客户端收到任何错误，即使当我 console.log 从 API 获取的机场时，它们就在那里，axios 功能正常工作!

编辑:问题出在我使用的箭头函数上，当您使用 ()=> 时，您通常使用的 this 不会保留，而是 this 仅来自该新函数。

Answer 1

问题出在 @input="getAsyncData(AirportDestinationName)" 行。它应该只是@input="getAsyncData。

举个例子:

private getAsyncData = _.debounce((query)=>{
                console.log(query)
                this.airports = []
                this.isFetching = true
                    axios.get(`https://iatacodes.org/api/v6/autocomplete?api_key=xxxxxxxxsomekeyxxxxxxxxxxxxxxxx&query=${query}`)
                        .then(data => {
                            data.data.response.airports.forEach((item) => this.airports.push(item))
                            this.isFetching = false
                        })
                        .catch(error => {
                            this.isFetching = false
                            throw error
                        })
                console.log(this.airports)
                console.log('fetched')
              },500);