Lodash Debounce Vue Js with Buefy Autocomplete

Question

我正在使用带有 buefy、axios 和 loadash 的 Vuejs cdn，我正在尝试使用 _.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);