访问嵌套对象时的Vue警告

Question

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

{{ user.area.name }}

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

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

只是访问对象没有警告。

{{ user.name }}

有什么建议吗？

Answer 1

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

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

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

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

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

如果你的模板有

{{ user.area.name }}

当它在异步任务完成之前最初呈现时，您将尝试访问其未定义的name属性area。

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

您的选择是...

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

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

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

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

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

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