[Vuejs]-Can't access data in an object within a Vue component

by

3đź‘Ť

âś…

When data is retrieved asynchronously, it is not immediately defined. Because you are referencing 

conversation.user.name

in the template, there are times when user is not defined, which results in your error.

Typically this is easily avoided with a guard.

{{conversation.user && conversation.user.name}}
👤Bert

0đź‘Ť

Whatever templating language you are using is likely expecting a string when you call {{conversation.user}} but you are giving it an object. So when the template engine tries to echo out the “string” you pass to it, but it will not be a string when just targeting conversation.user..Hence the error

Try this instead {{conversation.user.name}}

If the information is being loaded in asynchronous you may need to check that the user object exist first. So to do that it would be something like:

{{conversation.user && conversation.user.name}}
or for something like handlebars it would be like this

{{#if conversation.user}}
    {{conversation.user.name}}
{{/if}}
👤Brady Edgar

-3đź‘Ť

As shown here, user is itself an object and not a printable value. Have you tried accessing its properties individually, like {{conversation.user.name}}?

👤Don R

Leave a comment