[Vuejs]-Vue warning when accessing nested object

13👍

✅

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/

👤Phil

[Vuejs]-Why does Microsoft Edge not recognize "this*" pointer to object while I use Vue.JS?

0👍

Your user doesn’t contain an area, so when you try to read that, it’s undefined. You’re not allowed to use the . operator on things that are undefined, so when you do .name on that, you get the error that you got.

👤Joseph Sible-Reinstate Monica