如何显示包含 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;        
    })
  }
}

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

How to display an array of data containing objects in vue.js?

vue.js

vuejs2

vue-component

vuex