vue.js - 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 & colors 作为道具传递。

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

我完全理解它为什么生气——因为我没有通过foo，它没有colorId。

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

如何将空对象作为道具传递，以免出现未定义的错误？感谢您的任何建议！

Answer 1

默认接受一个工厂函数：

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

请参阅道具验证。

相关位：

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