3

我正在使用带有 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仅来自该新函数。

4

1 回答 1

0

问题在于@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);
于 2019-12-03T09:24:50.733 回答