useFieldArray

v0.0.14testeddemo

Manage a dynamic array field within a useForm. Exposes a reactive fields list with stable keys (preserved across reorders, so v-for :key keeps DOM/state intact) plus immutable push/prepend/insert/ remove/move/swap/replace/update operations that also re-key the matching errors and touched state.

Source Tests

Example

const form = useForm({ initialValues: { users: [{ name: '' }] } });
const { fields, push, remove } = useFieldArray('users');
// <div v-for="(field, i) in fields" :key="field.key">
//   <input v-model="field.value.name"> <button

Demo

Loading demo…

Signature

export function useFieldArray<T = unknown>(
  path: MaybeRefOrGetter<string>,
  options: UseFieldArrayOptions ={ ... }

Type Parameters

T= unknown

Parameters

Parameter	Type	Default	Description
`path`	`MaybeRefOrGetter<string>`	—	The dotted path of the array field
`options`?	`UseFieldArrayOptions`	`{}`	Optionally an explicit `form`

Returns

UseFieldArrayReturn<T>The reactive entries and mutation helpers

Property	Type	Default	Description
`fields`	`Readonly<Ref<Array<FieldArrayEntry<T>>>>`	—	The reactive list of entries with stable keys.
`push`	`(value: T) => void`	—	Append an item.
`prepend`	`(value: T) => void`	—	Prepend an item.
`insert`	`(index: number, value: T) => void`	—	Insert an item at an index.
`remove`	`(index: number) => void`	—	Remove the item at an index.
`move`	`(from: number, to: number) => void`	—	Move an item from one index to another.
`swap`	`(indexA: number, indexB: number) => void`	—	Swap two items.
`replace`	`(values: T[]) => void`	—	Replace the whole array.
`update`	`(index: number, value: T) => void`	—	Replace a single item.