数据未在服务器数据的v-select(自动完成)字段中刷新

时间:2018-02-22 05:07:48

标签: vue.js vuetify.js

我使用vuetify中的v-select,只有在我离开文本字段并返回后才会刷新数据。即使我们从服务器接收数据,它也不显示可用数据。

代码:

              <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: () => ({
  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)
}

0 个答案:

没有答案