如何加载ajax结果选择选项作为自动完成？

Question

我正在创建一个应用程序的地方搜索使用谷歌地点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在keyup上返回一个数组。我可以在控制台中看到结果。

什么不管用？

当我在this.items中修改结果时，它会给出这个错误。

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

Answer 1

尝试使用不可变状态。为数组选择手表。您应该保存到this.items的链接。

this.items = response.body.predictions

上面的代码替换了指向数组的链接。

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

如果要添加结果

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

如果你想清除

您应该在循环中替换未使用的值，同时保留到数组的当前链接。