如何加載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) 

，保留當前鏈接到陣列