V-модель VueJS для поддержки объектов через вложенные компоненты не обновляет их должным образом - PullRequest
1 голос
/ 29 апреля 2019

Я разрабатываю форму заявки. Дерево компонентов этого:

Application
    Form
        Fieldset
            Field

Компонент Application имеет конфигурационные реквизиты для компонента Form, называемые formSettings, так что он передает их так:

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

Далее мне нужно синхронизировать FormData с наборами полей.

Важно, чтобы в моем случае все значения для синхронизации имели тип объекта!

Для этого, во-первых, я решил сделать глубокий клон реквизита конфигурации наборов полей для внутреннего атрибута формы, называемого form, в созданном хуке, и дополнительно добавить специальный атрибут к каждому из они называются value, в которых хранятся все значения полей fieldset:

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 с их полями. Я попробовал подход как в компоненте 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-модели объектов?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...