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

Posted 2023-02-23

【中文标题】如何在 vue.js 中显示包含对象的数据数组？

【英文标题】：How to display an array of data containing objects in 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组件中的循环还是错了

我该如何解决这个问题？

【参考方案1】：

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

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

类似：

data() 
  return 
    filteredStates: []
  
,

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