Loadash Debounce Vuejs с автозаполнением Buefy - PullRequest
Новая
       9

Loadash Debounce Vuejs с автозаполнением Buefy

0 голосов
/ 01 мая 2018

Я использую Vuejs cdn с buefy, axios и loadash, я пытаюсь использовать _.debounce, поэтому я не буду слишком долго вызывать API с помощью автозаполнения Buefy с отправляемым запросом, я получил его работает, но автозаполнение не показывает результаты, как если бы я не использовал debounce, поэтому мои разделы выглядят следующим образом:

Автозаполнение 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)

Все остальное работает, и я не получаю никакой ошибки ни от сервера, ни от клиента, даже когда я утешаю. Log аэропорты, извлеченные из API, они есть, функция axios сработала!

EDIT: Проблема была в функции стрелки, которую я использовал, когда вы используете ()=>, this, который вы обычно используете, не останется, вместо этого this станет только из этой новой функции.

...