vue.js - 在渲染期间停止对属性的空警告

Question

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

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

项目作为属性传入:

props: {
        item: null
    },

当组件首次安装时，项目为空，因此当渲染发生时，我在日志中得到了这个:

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of null"

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

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

然后在渲染中使用 name 而不是 item.name 它工作正常，但是有没有办法告诉 Vue 停止提示子属性为 null，因为它似乎并不关心根属性为 null？

也许@LinusBorg 知道？

Answer 1

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

我只是将您的 item Prop 的默认值设置为空对象而不是 null:

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