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

Popular posts from this blog

node.js - Node js - Trying to send POST request, but it is not loading javascript content -

javascript - Replicate keyboard event with html button -

javascript - Web audio api 5.1 surround example not working in firefox -