Vue.js 如何将空对象作为道具传递给同一表单（创建/更新）？

Question

我正在尝试使用相同的表单来创建和更新对象。

在我的页面中，我传递所有颜色，如下所示：

<my-form-component :colors="colors" :foo="foo" />

我的表单组件如下所示：

// MyFormComponent.vue

<input type="text" v-model="foo.name" />

<select id="colorId" v-model="foo.colorId">
    <option value="">Select</option>
    <option v-for="color in colors"
            :key="color.id"
            :value="color.id">
            {{ color.name }}
    </option>
</select>

...

<script>
    ...

    props: {
        colors: {
            type: Array,
            required: true,
        },
        foo: {
            type: Object,
            required: false,
            default: undefined,
        },
    }
</script>

当我编辑对象时，foo一切都很好！我传递 foo 和颜色作为道具。

问题是创建新对象时，它foo不存在（显然），所以我收到错误“TypeError：无法读取未定义的属性‘colorId’”

我完全理解它为什么生气——因为我不是路过的foo，所以它没有colorId。

如果我创建一个foo数据对象，我会收到一个错误，因为我是foo作为 props 传递的，所以请使用它。

如何传入一个空对象作为道具，这样我就不会收到未定义的错误？感谢您的任何建议！

Answer 1

默认接受工厂函数：

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

请参阅道具验证。

相关位：

...
  // Object or array defaults must be returned from  
  // a factory function  
  default: function () {  
    return { message: 'hello' }  
  }
...