オートコンプリートとして選択オプションにajaxを読み込む方法は？

Question

Googleプレイス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プレイスはキーアップで配列を返します。私はコンソールで結果を見ることができます。

何が問題なのですか？

結果をthis.itemsに変更すると、このエラーが発生します。

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

Answer 1

unmutable状態を使用してみてください。 v-selectはあなたの配列を監視します。 this.itemsへのリンクを保存する必要があります。

this.items = response.body.predictions 

上記のコードあなたが

をクリアしたい場合は、サイクルで使用されていない値を置き換える必要があり、結果

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

を追加したい場合は、あなたの配列

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

へのリンクを置き換え、配列への現在のリンクを保持する