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

Question

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

{{ user.area.name }}

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

TypeError:无法读取未定义的属性“name”

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

{{ user.name }}

有什么建议吗？

Answer 1

您还可以使用三元运算符{{user.area？user.area.name:“}}

Answer 2

您的用户不包含区域，因此当您尝试读取该区域时，它是未定义的。您不允许在未定义的事物上使用运算符，因此当您在该事物上使用.name时，您会得到您得到的错误。

Answer 3

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

假设您在组件/Vue实例datainitialiser中有类似的东西。。。

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

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

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

如果你的模板有

html prettyprint-override">{{ user.area.name }}

当它在异步任务完成之前最初呈现时，您将尝试访问区域的名称属性，该属性未定义。

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

你的选择是...

>

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

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

使用条件渲染来防止错误

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

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