javascript - Can't access data in an object within a Vue component -
i don't understand why can't access data inside user
object.
{ "channel_id": 2, "user": { "id": 1, "name": "clyde santiago", "email": "dexterdev02@gmail.com", "created_at": "2017-07-25 08:10:58", "updated_at": "2017-07-25 08:10:58" }, "message": "ssd" }
accessing channel_id
, user
, message
fine. when access data in user
shows error,
"cannot read property 'name' of undefined"
here's html in vue component
<ul class="list-group"> <li class="list-group-item" v-for="conversation in conversations"> <p> {{conversation.message}} </p> <small>{{conversation.user.name}}</small> // error here </li> </ul>
when data retrieved asynchronously, not immediately defined. because referencing
conversation.user.name
in template, there times when user
not defined, results in error.
typically avoided guard.
{{conversation.user && conversation.user.name}}
Comments
Post a Comment