Vue.js 如何将空对象作为 Prop 传递给同一表单(创建/更新)？

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 和颜色作为 Prop 传递。

问题是创建新对象时，foo 不存在(显然)，因此我收到错误“TypeError:无法读取未定义的属性‘colorId’”

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

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

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

Answer 1

默认接受工厂函数:

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

参见Prop Validation .

相关位:

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