如何在 vue.js 2 中显示对象的值？答案

【问题标题】：How to display value of objects in vue.js 2?如何在 vue.js 2 中显示对象的值？
【发布时间】：2017-06-17 17:11:57
【问题描述】：

我的代码是这样的：

<script>
    export default {
        props:['search','category','shop'],
        created(){
            ...
        },
        data(){
            return{
                loading:false
            }
        },
        computed:{
            ...
            list:function(){
                console.log(this.$store.state.product);
                return this.$store.state.product.list
            },
        },
        methods:{
            ...
        }
    }
</script>

我愿意：console.log(this.$store.state.product); 在列表方法中

然后，我在控制台上检查它

结果是这样的：

我要显示名称的值

我尝试这样：

console.log(this.$store.state.product.list.id.name);

存在错误：

未捕获的类型错误：无法读取未定义的属性“名称”

我该如何解决这个错误？

【问题讨论】：

@T.J.克劳德，这不是一个重复的问题。它没有回答我的问题
它回答了上面的问题。如果这不是您的实际问题，请编辑以澄清。
@T.J.克劳德，看来我的问题很清楚。我试着喜欢这个：this.$store.state.product.list["12"].name; 但它不起作用
有了上面的信息，就可以了。请使用 Stack Snippets（[<>] 工具栏按钮）以 runnable minimal reproducible example 更新问题，以展示问题。
@T.J.克劳德，试着看看上图中的物体。如何复制对象？

标签： javascript jquery vue.js vuejs2 vue-component

【解决方案1】：

list 是一个对象，键是不同的元素 ID - 您当前正尝试像这样访问：

this.$store.state.product.list.id.name

您收到该错误是因为列表对象中没有 id 键，您需要将 .id 替换为实际的 id 值，如下所示：

this.$store.state.product.list["12"].name; //"Bunga Gandeng"

【讨论】：

它不起作用。存在错误：Uncaught TypeError: Cannot read property 'name' of undefined
Object.keys(this.$store.state.product.list) 给你什么？
所以"12" 是一个有效的密钥，this.$store.state.product.list["12"] 给你什么？
是的。它给我。结果：postimg.org/image/u990r84i1。但是当调用这样的名字：console.log(this.$store.state.product.list["12"].name);或console.log(this.$store.state.product.list[12].name);时，存在错误：Uncaught TypeError: Cannot read property 'name' of undefined