Vue warning when accessing nested object

I am not sure why I get a Vue warning when accessing nested object.

{{ user.area.name }}

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"

TypeError: Cannot read property 'name' of undefined

Just accessing the object has no warning.

{{ user.name }}

Any advice?

Solution

Totally guessing here but lets see if I'm right...

Say you've got something like this in your component / Vue instance data initialiser...

data () {
  return {
    user: {}
  }
}

and you then populate that object asynchronously, eg

mounted () {
  setTimeout(() => { // setTimeout is just an example
    this.user = {
      ...this.user,
      area: {
        name: 'foo'
      }
    }
  }, 1000)
}

If your template has

{{ user.area.name }}

when it initially renders before the asynchronous task has completed, you will be attempting to access the name property of area which is undefined.

Example ~ http://jsfiddle.net/tL1xbmoj/

Your options are...

Initialise your data with a structure that won't cause errors
```
data () {
  return {
    user: {
      area: { 
        name: null 
      } 
    }
  }
}
```
Example ~ http://jsfiddle.net/tL1xbmoj/1/
Use conditional rendering to prevent the error
```
<span v-if="user.area">{{ user.area.name }}</span>
```
Example ~ http://jsfiddle.net/tL1xbmoj/2/