data is not refreshing in v-select (autocomplete) field from server data

Question

I'm using the v-select from vuetify and it refreshes the data only after I leave the textfield and getback. It shows no data available even if we receive data from the server.

Code:

              <v-select
                :loading="loading"
                cache-items
                :search-input.sync="search"
                :debounce-search="0"
                v-model="select"
                label="Select"
                :items="items"
                autocomplete
                autofocus
              ></v-select>

Data:

data: () => ({
  state: null,
  states: [],
  loading: false,
  items: [],
  search: "",
  select: [],
}),
watch: {
  search(val) {
    val && this.querySelections(val)
  }
},
querySelections(v) {
  this.loading = true
  // Simulated ajax query


  var baseurl = "https://maps.googleapis.com/maps/api/geocode";
  var api = axios.create({
    baseURL: baseurl,
  });

  api.get(`/json?key=KEY&address=${v}`).then(({data}) => {
    for (var i = 0; i < data.results.length; i++) {
      console.log(data.results[i].place_id);
      this.states.push(data.results[i].place_id)
    }
  })

  setTimeout(() => {
    this.items = this.states
    this.loading = false
  }, 500)
}

Don't use arrow functions for `data`, it messes up the `this` binding. Use either `data() { ... }` or `data: function() { ... }` — Phil, Feb 22 '18 at 05:56
Possible duplicate of [Vuex: \_this.$store is undefined](https://stackoverflow.com/questions/48799617/vuex-this-store-is-undefined) — Phil, Feb 22 '18 at 05:57
@Phil I don't see any mention of Vuex elements inside the source code — Ferrybig, Feb 22 '18 at 08:10
@Ferrybig please read the question and answer, not just the title — Phil, Feb 22 '18 at 09:55
I don't want to filter the data, I want to do remote server call and autocomplete it — jason, Feb 22 '18 at 10:10
Where are you calling `states` in your code? That is the variable you assigned to after calling from `axios.get()` — Ru Chern Chong, Feb 22 '18 at 14:33
I used this to get it to work - https://github.com/sagalbot/vue-select — jason, Feb 22 '18 at 14:37
v-select by default is not adding values and displaying them on the run — jason, Feb 22 '18 at 14:38
@jason have you fixed up your component's `data` property to not use an arrow function yet? — Phil, Feb 22 '18 at 22:56
@Phil I used another lib to get this functionality : https://github.com/sagalbot/vue-select — jason, Mar 07 '18 at 12:59

data is not refreshing in v-select (autocomplete) field from server data

0 Answers0