访问嵌套对象时 Vue 发出警告

我不知道为什么在访问嵌套对象时会收到 Vue 警告。

{{ user.area.name }}

[Vue warn]：渲染错误：“TypeError：无法读取未定义的属性‘名称’”

类型错误：无法读取未定义的属性“名称”

仅访问该对象没有任何警告。

{{ user.name }}

有什么建议吗？

完全是猜测，但让我们看看我是否正确......

假设你的组件/Vue 实例中有类似的东西data初始化器...

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

然后你异步填充该对象，例如

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

如果你的模板有

{{ user.area.name }}

当它最初渲染时before异步任务已完成，您将尝试访问name的财产area这是未定义的。

例子~http://jsfiddle.net/tL1xbmoj/ http://jsfiddle.net/tL1xbmoj/

您的选择是...

1. 使用不会导致错误的结构初始化数据

   data () {
     return {
       user: {
         area: { 
           name: null 
         } 
       }
     }
   }
   

   例子~http://jsfiddle.net/tL1xbmoj/1/ http://jsfiddle.net/tL1xbmoj/1/

2. 使用条件渲染来防止错误

   <span v-if="user.area">{{ user.area.name }}</span>
   

   例子~http://jsfiddle.net/tL1xbmoj/2/ http://jsfiddle.net/tL1xbmoj/2/