Question

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

Application
    Form
        Fieldset
            Field

Application组件具有名为formSettings的Form组件的配置道具，以便它可以这样传递它们：

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

接下来，我需要将FormData与字段集同步。

在我的情况下，所有要同步的值都有一个对象类型很重要！

要实现此目的，首先，我决定在创建的钩子中将字段集配置道具深深克隆到名为form的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模型：

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

但是它也不会更新Fields组件。

如何使对象的嵌套v模型正常工作？

通过嵌套组件的对象prop的VueJS v模型无法按预期进行更新

0 个答案: