Question

我正在使用带有buefy，axios和loadash的Vuejs cdn，我试图使用_.debounce，因此我不会使用Buefy Autocomplete调用API太多时间我发送的查询，I＆＃39;已经让它工作但是自动完成没有显示结果，因为我没有使用去抖动，所以我的部分如下：

自动填充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的功能，但是当我用它替换其他功能时，自动完成功能不会产生下拉列表，这很奇怪，因为这个例子与我使用的相同：< / p>

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)

其他一切正常，我没有从服务器和客户端收到任何错误，即使我在控制台上登录从API获取的机场，也就是说，axios功能正常工作！

修改问题出在我正在使用的箭头功能上，当你使用()=> {I}你曾经使用过的this时，this只会来自那个新的tf.constant功能

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);

具有Buefy自动完成功能的Loadash Debounce Vuejs

1 个答案: