diff --git a/.changeset/curvy-eagles-build.md b/.changeset/curvy-eagles-build.md new file mode 100644 index 000000000..da516da81 --- /dev/null +++ b/.changeset/curvy-eagles-build.md @@ -0,0 +1,5 @@ +--- +'vee-validate': major +--- + +fix: clone values inserted into field arrays closes #4372 diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json index d14e541c7..6b1d7239f 100644 --- a/packages/nuxt/package.json +++ b/packages/nuxt/package.json @@ -37,15 +37,15 @@ "dist/*" ], "dependencies": { - "@nuxt/kit": "^3.6.2", + "@nuxt/kit": "^3.6.3", "local-pkg": "^0.4.3", "vee-validate": "^4.10.6" }, "devDependencies": { "@nuxt/eslint-config": "^0.1.1", "@nuxt/module-builder": "^0.4.0", - "@nuxt/schema": "^3.6.2", - "@nuxt/test-utils": "^3.6.2", - "nuxt": "^3.6.2" + "@nuxt/schema": "^3.6.3", + "@nuxt/test-utils": "^3.6.3", + "nuxt": "^3.6.3" } } diff --git a/packages/vee-validate/src/useFieldArray.ts b/packages/vee-validate/src/useFieldArray.ts index 10dc3d789..d19478895 100644 --- a/packages/vee-validate/src/useFieldArray.ts +++ b/packages/vee-validate/src/useFieldArray.ts @@ -1,4 +1,5 @@ import { Ref, unref, ref, onBeforeUnmount, watch, MaybeRef } from 'vue'; +import { klona as deepCopy } from 'klona/full'; import { isNullOrUndefined } from '../../shared'; import { FormContextKey } from './symbols'; import { FieldArrayContext, FieldEntry, PrivateFieldArrayContext, PrivateFormContext } from './types'; @@ -24,7 +25,7 @@ export function useFieldArray(arrayPath: MaybeRef): Fi if (!form) { warn( - 'FieldArray requires being a child of `
` or `useForm` being called before it. Array fields may not work correctly' + 'FieldArray requires being a child of `` or `useForm` being called before it. Array fields may not work correctly', ); return noOpApi; @@ -77,7 +78,6 @@ export function useFieldArray(arrayPath: MaybeRef): Fi } const key = entryCounter++; - const entry: FieldEntry = { key, value: computedDeep({ @@ -96,7 +96,7 @@ export function useFieldArray(arrayPath: MaybeRef): Fi update(idx, value); }, - }) as any, // will be auto unwrapped + }) as TValue, // will be auto unwrapped isFirst: false, isLast: false, }; @@ -127,7 +127,8 @@ export function useFieldArray(arrayPath: MaybeRef): Fi afterMutation(); } - function push(value: TValue) { + function push(initialValue: TValue) { + const value = deepCopy(initialValue); const pathName = unref(arrayPath); const pathValue = getFromPath(form?.values, pathName); const normalizedPathValue = isNullOrUndefined(pathValue) ? [] : pathValue; @@ -166,7 +167,8 @@ export function useFieldArray(arrayPath: MaybeRef): Fi updateEntryFlags(); } - function insert(idx: number, value: TValue) { + function insert(idx: number, initialValue: TValue) { + const value = deepCopy(initialValue); const pathName = unref(arrayPath); const pathValue = getFromPath(form?.values, pathName); if (!Array.isArray(pathValue) || pathValue.length < idx) { @@ -202,7 +204,8 @@ export function useFieldArray(arrayPath: MaybeRef): Fi form?.validate({ mode: 'validated-only' }); } - function prepend(value: TValue) { + function prepend(initialValue: TValue) { + const value = deepCopy(initialValue); const pathName = unref(arrayPath); const pathValue = getFromPath(form?.values, pathName); const normalizedPathValue = isNullOrUndefined(pathValue) ? [] : pathValue;