3

我正在开发一个申请表。它的组件树:

Application
    Form
        Fieldset
            Field

Application 组件具有用于调用 Form 组件的配置道具,formSettings以便它传递它们:

<application-form v-bind="formSettings"/>

接下来,我需要将 FormData 与 Fieldsets 同步。

重要的是,在我的情况下,所有要同步的值都具有对象类型!

为了实现它,首先,我决定form在 created 钩子中将 fieldset 配置属性深度克隆到 Form 的内部属性,称为 ,并为每个属性添加一个特殊属性,称为value,它存储字段集字段的所有值:

created() {
  this.form.fieldsets = _.cloneDeepWith(this.fieldsets);
  this.form.fieldsets.forEach(fieldset => {
    fieldset.value = {};
    fieldset.fields.forEach(field => {
      fieldset.value[field.name] = field.value;
    })
  })
}

因此,表单的模板使用此克隆呈现:

 <vue-fieldset v-for="(fieldset, i) in fieldsets"
               :key="`fieldset-${i}`"
               v-model="fieldset.value"
               v-bind="fieldset"/>

接下来,我需要将 Fieldsets 值与它们的 Fields 同步。我尝试了一种类似 Form 组件的方法——创建一个内部可变属性,存储组件配置道具的克隆及其值。使用它不会按预期更新嵌套组件,并且当我尝试更改 中的某些字段值时form.fieldsets,它不会更改子组件中的任何内容,因此我拒绝了这种方法。我使用的另一种方法是在 Fieldset 组件中定义一个计算属性:

computed: {
  collectedValue: {
    get() {
      return this.value
    },
    set(newValue) {
      this.$emit('update:value', newValue);
    }
  }
}

然后 - 使用 v-model :

<vue-input v-for="field in fieldset.fields"
           :key="field.name"
           v-model="collectedValue[field.name]"
           v-bind="field"/>

但它也不会更新 Fields 组件。

我该怎么做才能使对象的嵌套 v-model 正常工作?

4

0 回答 0