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

Question

My code is like this :

<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>

I do : console.log(this.$store.state.product); in list method

Then, I check it on the console

The result is like this :

I want display value of name

I try like this :

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

There exist error :

Uncaught TypeError: Cannot read property 'name' of undefined

How can I solve the error?

Answer 1

The list is an object, with the keys being the different element id's - you are currently trying to access like this:

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

You are getting that error because there is no id key in the list object, you need to replace .id with the actual id value, like this:

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