如何加载ajax导致选择选项作为自动完成？

Question

我正在使用Google Places API创建地方搜索应用。

我的组件

<v-select 
label="Type your Address" 
autocomplete 
:async-loading="loading" 
cache-items 
:items="items" 
:search-input.sync="search" 
v-model="seachPlacesModel" 
></v-select> 

// Script 

data() { 
return { 
    searchPlacesModel: '', 
    loading: false, 
    items: [], 
    search: null 
} 
}, 
watch: { 
search (val) { 
    val && this.searchPlaces(val) 
} 
}, 
methods: { 
searchPlaces (input) { 
    this.loading = true 
this.$http.post(googlePlaces + '?input=' + input + '&types=geocode&country=uk&key=' + googleKey + '') 
    .then(response => { 
    console.log(response.body.predictions) 
    this.items = response.body.predictions 
    console.log(this.items) 
    }, error => { 
    console.log(error) 
    }) 
} 

什么工作呢？

Google Places会在关键字上返回一个数组。我可以在控制台中看到结果。

什么不工作？

当我在this.items变异的结果，它给了我这个错误。

void using observed data object as vnode data: ...... Always create fresh vnode data objects in each render!

Answer 1

尝试使用unmutable状态。 v选择手表为您的阵列。 你应该保存链接到this.items。上述

this.items = response.body.predictions 

代码替换链接到你的阵列

this.items.push(response.body.predictions) 

如果你想如果你想清除

你应该在周期更换未使用的增值结果

this.items.splice(0, this.items.length) 

，保留当前链接到阵列