javascript - 在 Vuejs 中将多个组件的数据收集到一个组件中的最佳方法

Question

我通过几个步骤创建了一个表单。这是我的树:

• fullForm.vue
  • firstStep.vue
  • 第二步.vue
  • thirdStep.vue

每个步骤都有几个存储在 data() 中的字段。

//步骤 1 的示例

 data: () => ({
      model: {
        official_name: '',
        commmercial_name: '',
        status: '',
        status_other: '',
        …

每一步都是父组件(fullForm.vue)中的导入组件

    <first-step ref="firstStep" @on-validate="onStepValidate"></first-step>
    <second-step ref="secondStep" @on-validate="onStepValidate"></second-step>
    <third-step ref="thirdStep" @on-validate="onStepValidate"></third-step>

我想将所有子组件的数据合并到 fullForm.vue 的数据 formFull 中。

我试过这个:

onStepValidate(validated, model) {
   if (validated) {
     this.formFull = { ...this.formFulll, ...model };
    }
 }

它工作了一半。

当我完成第一步并且有效时，formFull 将填充第 1 步。

当我验证步骤 2 时，它会删除 formFull 并仅使用步骤 2 填充它。

如何保存所有数据？谢谢!

Answer 1

您有一个拼写错误(3 ls):

this.formFull = { ...this.formFulll, ...model };

试试这个:

this.formFull = { ...this.formFull, ...model };