Я разрабатываю форму заявки.
Дерево компонентов этого:
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-модели объектов?