diff --git a/packages/core/forms/src/components/FormGenerator.vue b/packages/core/forms/src/components/FormGenerator.vue index 2b8294191d..f6bc99e556 100644 --- a/packages/core/forms/src/components/FormGenerator.vue +++ b/packages/core/forms/src/components/FormGenerator.vue @@ -20,6 +20,7 @@ :options="options" :vfg="vfg" @model-updated="onModelUpdated" + @refresh-model="onRefreshModel" @validated="onFieldValidated" /> @@ -70,6 +71,7 @@ :options="options" :vfg="vfg" @model-updated="onModelUpdated" + @refresh-model="onRefreshModel" @validated="onFieldValidated" /> @@ -100,6 +102,7 @@ :options="options" :vfg="vfg" @model-updated="onModelUpdated" + @refresh-model="onRefreshModel" @validated="onFieldValidated" /> @@ -128,6 +131,7 @@ :options="options" :vfg="vfg" @model-updated="onModelUpdated" + @refresh-model="onRefreshModel" @validated="onFieldValidated" /> @@ -224,7 +228,7 @@ export default { }, }, }, - emits: ['validated', 'modelUpdated'], + emits: ['validated', 'modelUpdated', 'refreshModel'], data() { return { @@ -325,6 +329,12 @@ export default { this.$emit('validated', isValid, this.errors, this) }, + onRefreshModel() { + // This is for updating a deeply nested array element + // See `modelUpdated` in `FieldArray.vue` + this.$emit('refreshModel') + }, + onModelUpdated(newVal, schema) { this.$emit('modelUpdated', newVal, schema) }, diff --git a/packages/core/forms/src/components/FormGroup.vue b/packages/core/forms/src/components/FormGroup.vue index c31ea561e8..a35d7bcb47 100644 --- a/packages/core/forms/src/components/FormGroup.vue +++ b/packages/core/forms/src/components/FormGroup.vue @@ -48,6 +48,7 @@ :schema="field" :vfg="vfg" @model-updated="onModelUpdated" + @refresh-model="onRefreshModel" @validated="onFieldValidated" />
e.field.fieldName === field.fieldName).map((item) => item.error) }, + onRefreshModel() { + // This is for updating a deeply nested array element + // See `modelUpdated` in `FieldArray.vue` + this.$emit('refreshModel') + }, onModelUpdated(newVal, schema) { this.$emit('modelUpdated', newVal, schema) }, diff --git a/packages/core/forms/src/components/fields/FieldArray.vue b/packages/core/forms/src/components/fields/FieldArray.vue index fb7ecf69fd..d7a994230e 100644 --- a/packages/core/forms/src/components/fields/FieldArray.vue +++ b/packages/core/forms/src/components/fields/FieldArray.vue @@ -162,6 +162,7 @@ export default { default: 'x', }, }, + emits: ['refreshModel'], methods: { generateSchema(rootValue, schema, index) { // Instead of using schema directly, we make a copy to avoid schema object mutation side effects @@ -211,7 +212,18 @@ export default { getFieldType(fieldSchema) { return 'field-' + fieldSchema.type }, - modelUpdated() {}, + modelUpdated() { + // Ideally the event handler should be: + // `modelUpdated(model, schema) { this.$emit('modelUpdated', model, schema) }` + // but currently `schema` is the plain key of the field: + // when the field is nested, `schema` does not contain any info about its parent field, + // so in the consuming components, we cannot know which field is being updated. + // For example, if each element of the array is an object with a `name` field, + // then if the user updates the `name` field, the `schema` will be `name` here, + // so the consuming component will think the root `name` field is updated, + // which is the name of the plugin and should not be updated. + this.$emit('refreshModel') + }, handleInput(val, index) { this.value = this.value.map((item, i) => i === index ? val : item) }, diff --git a/packages/core/forms/src/components/fields/FieldObject.vue b/packages/core/forms/src/components/fields/FieldObject.vue index 15f0cf346d..ad6899773e 100644 --- a/packages/core/forms/src/components/fields/FieldObject.vue +++ b/packages/core/forms/src/components/fields/FieldObject.vue @@ -8,6 +8,7 @@ :model="value" :options="formOptions" :schema="schema.schema" + @model-updated="updateModel" />
diff --git a/packages/entities/entities-plugins/src/components/PluginEntityForm.vue b/packages/entities/entities-plugins/src/components/PluginEntityForm.vue index 1505304ad0..97bd976f70 100644 --- a/packages/entities/entities-plugins/src/components/PluginEntityForm.vue +++ b/packages/entities/entities-plugins/src/components/PluginEntityForm.vue @@ -36,6 +36,7 @@ :options="formOptions" :schema="formSchema" @model-updated="onModelUpdated" + @refresh-model="getModel" >