How to display value of objects in 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?

@T.J. Crowder, This is not a duplicate question. It does not answer my question — moses toh, Feb 01 '17 at 08:20
It answers the question above. If that's not your actual question, edit to clarify. — T.J. Crowder, Feb 01 '17 at 08:33
@T.J. Crowder, Seems my question is clear. I tried to like this : `this.$store.state.product.list["12"].name;` and it does not work — moses toh, Feb 01 '17 at 08:45
With the information above, that would work. Please update the question with a **runnable** [mcve] using Stack Snippets (the `[<>]` toolbar button) demonstrating the problem. — T.J. Crowder, Feb 01 '17 at 08:49
@T.J. Crowder, Try to see the object in the image above. How do I copy the object? — moses toh, Feb 01 '17 at 10:38
I wanted to demonstrate my problem with jsfiddle (https://jsfiddle.net/). So how can I copy object to jsfiddle so you can see my problem — moses toh, Feb 01 '17 at 10:49
You can use `JSON.stringify` on most objects to get something that you can then use as an object literal in code. So `console.log(JSON.stringify(theObject));` then copy the result from the console. (It may be wrapped in double quotes; if so, don't copy the double quotes.) — T.J. Crowder, Feb 01 '17 at 10:55
@T.J. Crowder, When I try on the jsfiddle, It works. But in my project. It does not work. Seems there exist another error. The error : `[Vue warn]: Error when rendering component at C:\xampp\htdocs\chelseashop\resources\assets\js\components\SearchResultView.vue:` — moses toh, Feb 01 '17 at 11:23
@ T.J. Crowder, Seems the error who makes this `this.$store.state.product.list["12"].name;` not working — moses toh, Feb 01 '17 at 11:25
I suspect you're running into [this confusing thing about the console](http://stackoverflow.com/questions/38660832/element-children-has-elements-but-returns-empty-htmlcollection) and that the `product` object's `list` isn't filled in until *later*, after the code where you're trying to do `this.$store.state.product.list["12"].name` has already run. You can prove/disprove that by doing `console.log(JSON.stringify(this.$store.state.product));` where you're currently doing `console.log(this.$store.state.product);`. — T.J. Crowder, Feb 01 '17 at 11:28
(Lurkers: Further debugging by moses toh tells us that this isn't a duplicate of [*Dynamically access object property using variable*](http://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable) -- that's *part* of the problem, but not the whole problem.) It's probably a combination of that, plus [this](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call), plus [this](http://stackoverflow.com/questions/38660832/element-children-has-elements-but-returns-empty-htmlcollection). Fun fun fun. — T.J. Crowder, Feb 01 '17 at 11:30
@T.J. Crowder, I'm still confused to solve error `[Vue warn]: Error when rendering component at C:\xampp\htdocs\chelseashop\resources\assets\js\components\S‌earchResultView.vue: `. Sorry, my english is not so good. So I find it difficult to understand what you mean — moses toh, Feb 01 '17 at 12:00
That error doesn't tell us much of anything, I'm afraid. You'll have to create an [mcve] (each of those -- M, C, and V -- are equally important), replicating the error, and post it to the question (or really, at this point, I would delete this question, thoroughly review the three questions and answers I linked above, debug further, and post an MCVE to a new question if you can't resolve it). — T.J. Crowder, Feb 01 '17 at 12:07
@T.J. Crowder, Ok. I will make a new question. Thank you for your help — moses toh, Feb 01 '17 at 12:09

hackerrdave · Answer 1 · 2017-02-01T04:34:15.393

0

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"

edited Feb 01 '17 at 04:34

answered Feb 01 '17 at 03:58

hackerrdave

6,486
1
25
29

It does not work. There exist error : `Uncaught TypeError: Cannot read property 'name' of undefined` – moses toh Feb 01 '17 at 04:16
What does `Object.keys(this.$store.state.product.list)` give you? – hackerrdave Feb 01 '17 at 04:19
so `"12"` is a valid key, what does `this.$store.state.product.list["12"]` give you? – hackerrdave Feb 01 '17 at 04:33
Yes. It give me. The result : https://postimg.org/image/u990r84i1/. But when call name like this : `console.log(this.$store.state.product.list["12"].name);` or `console.log(this.$store.state.product.list[12].name);`, There exist error : `Uncaught TypeError: Cannot read property 'name' of undefined` – moses toh Feb 01 '17 at 04:42

How to display value of objects in vue.js 2?

1 Answers1