diff --git a/packages/vee-validate/src/Field.ts b/packages/vee-validate/src/Field.ts index d07f9c04d..301db2ab0 100644 --- a/packages/vee-validate/src/Field.ts +++ b/packages/vee-validate/src/Field.ts @@ -168,7 +168,7 @@ export const Field = defineComponent({ } if (newModelValue !== applyModifiers(value.value, props.modelModifiers)) { - value.value = newModelValue; + value.value = (newModelValue as any) === IS_ABSENT ? undefined : newModelValue; validateField(); } }); diff --git a/packages/vee-validate/tests/Field.spec.ts b/packages/vee-validate/tests/Field.spec.ts index c80de9566..07c3fe0bc 100644 --- a/packages/vee-validate/tests/Field.spec.ts +++ b/packages/vee-validate/tests/Field.spec.ts @@ -1038,4 +1038,28 @@ describe('', () => { await flushPromises(); expect(value.value).toBe(false); }); + + // #3468 + test('should avoid setting the absent value to Vue', async () => { + const form = ref({}); + const wrapper = mountWithHoc({ + setup() { + return { + form, + }; + }, + template: ` + + `, + }); + + await flushPromises(); + const input = document.querySelector('input') as HTMLInputElement; + setValue(input, '1234'); + await flushPromises(); + expect(input.value).toBe('1234'); + form.value = {}; + await flushPromises(); + expect(input.value).toBe(''); + }); });