javascript - VueJS v-model for object prop 通过嵌套组件不会按预期更新它们

Question

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

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 正常工作？

标签： javascriptobjectvue.jsnestedv-model