如何在 vue.js 中显示包含对象的数据数组？答案

【问题标题】：How to display an array of data containing objects in vue.js?如何在 vue.js 中显示包含对象的数据数组？
【发布时间】：2018-06-01 08:15:33
【问题描述】：

我的 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组件中的循环还是错了

我该如何解决这个问题？

【问题讨论】：

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

filteredStates 执行异步 API 请求，您不能在计算属性中执行此操作（事实上，您不会从该属性返回任何内容，因此它是无用的）。

您应该将filteredStates 设为数据属性，然后观察keyword 的更改，然后更新filteredStates 作为响应。

类似：

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

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

【讨论】：