我使用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)
}