useFieldArray

v0.0.16testeddemo

Manage a dynamic array field within a {@link 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 = any>(
  path: MaybeRefOrGetter<string>,
  options: UseFieldArrayOptions ={ ... }

Type Parameters

T= any

Parameters

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

Returns

UseFieldArrayReturn<T>The reactive entries and mutation helpers