diff --git a/packages/core/src/Form.ts b/packages/core/src/Form.ts index f0674b7a6..23f53150e 100644 --- a/packages/core/src/Form.ts +++ b/packages/core/src/Form.ts @@ -1,4 +1,4 @@ -import { h, defineComponent, watch } from 'vue'; +import { h, defineComponent, watchEffect } from 'vue'; import { useForm } from './useForm'; import { SubmissionHandler } from './types'; import { normalizeChildren } from './utils'; @@ -35,8 +35,16 @@ export const Form = defineComponent({ } // FIXME: for whatever reason that's beyond me, this fixes the reactivity issue - // eslint-disable-next-line @typescript-eslint/no-empty-function - watch(errors, () => {}); + watchEffect(() => { + // eslint-disable-next-line no-unused-expressions + errors.value; + // eslint-disable-next-line no-unused-expressions + meta.value; + // eslint-disable-next-line no-unused-expressions + values.value; + // eslint-disable-next-line no-unused-expressions + isSubmitting.value; + }); return () => { const children = normalizeChildren(ctx, { diff --git a/packages/core/tests/Form.spec.ts b/packages/core/tests/Form.spec.ts index 1ea6f458b..21dfb6392 100644 --- a/packages/core/tests/Form.spec.ts +++ b/packages/core/tests/Form.spec.ts @@ -713,4 +713,24 @@ describe('
', () => { jest.useRealTimers(); }); + + test('aggregated meta reactivity', async () => { + const wrapper = mountWithHoc({ + template: ` + + + + + + `, + }); + + const submitBtn = wrapper.$el.querySelector('#submit'); + const input = wrapper.$el.querySelector('input'); + await flushPromises(); + expect(submitBtn.disabled).toBe(true); + setValue(input, '12'); + await flushPromises(); + expect(submitBtn.disabled).toBe(false); + }); });