在渲染期间停止属性的空警告

Question

我有一个组件来呈现它的模板，例如一个看起来像这样的跨度：

<span>{{item.name}}</span>

项目作为属性传入：

props: {
        item: null
    },

当组件第一次挂载时，item 为空，所以当渲染发生时，我会在日志中得到这个：

[Vue 警告]：渲染错误：“TypeError：无法读取属性‘名称’ 为空”

如果我创建一个这样的计算属性：

computed: {
        name() {
            if (this.item != null) {
                return this.item.name
            }
        }
    },

然后将 name 而不是 item.name 放在渲染中它工作正常，但是有没有办法告诉 Vue 停止抱怨子属性为空，因为它似乎不关心根属性为空？

也许@LinusBorg 知道？

Answer 1

这不是 Vue 特定的。 Vue 只是警告你你有一个 javascript TypeError。导致错误是因为您无法在 javascript 中访问 null 值的属性。

我只是将 item 属性的默认值设置为空对象，而不是 null：

props: {
  item: { type: Object, default: () => ({}) }
}