vue.jsにオブジェクトを含むデータの配列を表示するにはどうすればいいですか？このような

Question

マイVUE成分：

<template> 
    ... 
     <ul v-if="!selected && keyword"> 
      <li v-for="state in filteredStates" @click="select(state.name)">{{ state.name }}</li> 
     </ul> 
    ... 
</template> 
<script> 
    export default { 
     ... 
     computed: { 
      filteredStates() { 
       const data = this.$store.dispatch('getProducts', { 
        q: this.keyword 
       }) 
       data.then((response) => { 
        console.log(response.data) 
        return response.data 
       }) 
      } 
     } 
    } 
</script> 

にconsole.log（response.data）の結果、このような：

Iは、上記画像のような配列データを表示します。しかし、それは価値を示すものではありません。多分、vueコンポーネントの私のループは間違っています

どうすればこの問題を解決できますか？

Answer 1

filteredStatesは非同期APIリクエストを実行しますが、計算されたプロパティではこれを実行してはいけません（実際にはそのプロパティから何も返されないので役に立たない）。

filteredStatesをデータプロパティにしてから、keywordの変更を監視し、それに応答してfilteredStatesを更新する必要があります。

data() { 
    return { 
    filteredStates: [] 
    } 
}, 

watch: { 
    keyword(value) { 
    this.$store.dispatch('getProducts', { q: value }) 
    .then(res => { 
     this.filteredStates = res.data;   
    }) 
    } 
}