Question

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

{{ user.area.name }}

[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'name'”

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的{{1}}属性。

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

您的选择是...

使用不会引起错误的结构初始化数据
```
area
```
示例〜http://jsfiddle.net/tL1xbmoj/1/

使用条件渲染来防止错误

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

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

Answer 2

您的<span v-if="user.area">{{ user.area.name }}</span>不包含user，因此当您尝试阅读时，它就是area。不允许在undefined上使用.运算符，因此当您对undefined执行.name时，会得到错误提示。

Answer 3

您也可以使用三元运算符 {{ user.area ? user.area.name : "" }}

访问嵌套对象时的Vue警告

3 个答案: