如何在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）的结果如下：

我想显示如上图所示的数组数据。但它没有显示出价值。也许我在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;        
    })
  }
}