diff --git a/src/FormularioField.vue b/src/FormularioField.vue index 9b7e178..3f11259 100644 --- a/src/FormularioField.vue +++ b/src/FormularioField.vue @@ -39,6 +39,7 @@ const VALIDATION_BEHAVIOR = { export default class FormularioField extends Vue { @Inject({ default: '' }) __Formulario_path!: string @Inject({ default: undefined }) __FormularioForm_set!: Function|undefined + @Inject({ default: () => (): void => {} }) __FormularioForm_emitInput!: Function @Inject({ default: () => (): void => {} }) __FormularioForm_emitValidation!: Function @Inject({ default: undefined }) __FormularioForm_register!: Function|undefined @Inject({ default: undefined }) __FormularioForm_unregister!: Function|undefined @@ -96,12 +97,12 @@ export default class FormularioField extends Vue { if (!shallowEquals(value, this.proxy)) { this.proxy = value - } + this.$emit('input', value) - this.$emit('input', value) - - if (typeof this.__FormularioForm_set === 'function') { - this.__FormularioForm_set(this.fullPath, value) + if (typeof this.__FormularioForm_set === 'function') { + this.__FormularioForm_set(this.fullPath, value) + this.__FormularioForm_emitInput() + } } } diff --git a/src/FormularioForm.vue b/src/FormularioForm.vue index b38746d..1b7d44b 100644 --- a/src/FormularioForm.vue +++ b/src/FormularioForm.vue @@ -87,7 +87,8 @@ export default class FormularioForm extends Vue { if (!field.hasModel && this.modelIsDefined && value !== undefined) { field.model = value } else if (field.hasModel && !shallowEquals(field.proxy, value)) { - this.setFieldValueAndEmit(path, field.proxy) + this.setFieldValue(path, field.proxy) + this.emitInput() } if (has(this.fieldsErrorsComputed, path)) { @@ -111,8 +112,18 @@ export default class FormularioForm extends Vue { } @Provide('__FormularioForm_set') - private setFieldValueAndEmit (field: string, value: unknown): void { - this.setFieldValue(field, value) + private setFieldValue (field: string, value: unknown): void { + if (value === undefined) { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { [field]: value, ...proxy } = this.proxy + this.proxy = proxy + } else { + setNested(this.proxy, field, value) + } + } + + @Provide('__FormularioForm_emitInput') + private emitInput (): void { this.$emit('input', { ...this.proxy }) } @@ -220,15 +231,5 @@ export default class FormularioForm extends Vue { this.proxy = this.modelCopy } } - - private setFieldValue (field: string, value: unknown): void { - if (value === undefined) { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { [field]: value, ...proxy } = this.proxy - this.proxy = proxy - } else { - setNested(this.proxy, field, value) - } - } } diff --git a/test/unit/FormularioField.test.js b/test/unit/FormularioField.test.js index af77671..e02980a 100644 --- a/test/unit/FormularioField.test.js +++ b/test/unit/FormularioField.test.js @@ -282,12 +282,8 @@ describe('FormularioField', () => { const form = wrapper.findComponent(FormularioForm) - // @TODO: investigate where redundant events come from expect(form.emitted('input')).toEqual([ [{}], - [{}], - [{ date: new Date('2001-05-12') }], - [{ date: new Date('2001-05-12') }], [{ date: new Date('2001-05-12') }], ]) })