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

Question

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

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

该项目作为属性传入：

props: {
        item: null
    },

当组件首次安装时，项目为空，因此当渲染发生时，我会在日志中看到以下内容：

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

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

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

然后在渲染中放置 name 而不是 item.name ，效果很好，但是有没有办法告诉 Vue 停止抱怨子属性为 null，因为它似乎并不关心根属性为 null？

也许@LinusBorg 知道？

Answer 1

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

我只需将itemprop 的默认值设置为空对象，而不是null：

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