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会在keyup上返回一个数组。我可以在控制台中看到结果。

什么不起作用？

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

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

Answer 1

尝试使用不可变状态。为您的阵列选择v-select手表。你应该保存到this.items的链接。

this.items = response.body.predictions

上面的代码替换了您的数组的链接

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

如果要添加结果

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

如果你想清除

你应该循环替换未使用的值，保留当前链接到数组

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

1 个答案: