Dynamic Array Fields

Schema definition

const schema: FieldDefinition[] = [
  {
    type: 'array',
    name: 'members',
    label: 'Team members',
    fields: [
      { type: 'text', name: 'name', label: 'Name', required: true },
      { type: 'email', name: 'email', label: 'Email', required: true },
    ],
  },
]

Sub-field names are bare ('name', not 'members.name') — useFieldArray prefixes them to 'members.0.name', 'members.1.name', ... per row itself; a pre-prefixed name would end up doubled ('members.0.members.name').

FormRenderer renders an ArrayField automatically with Add / Remove buttons.

useFieldArray composable

import { useFieldArray } from '@macrulez/vue-form-schema'

const { rows, count, append, prepend, remove, move, swap, replace } = useFieldArray(form, 'members')

append(defaults?)

Add a row at the end.

prepend(defaults?)

Add a row at the beginning.

remove(index)

Remove a row.

move(from, to)

Move a row.

swap(a, b)

Swap two rows.

replace(index, defaults?)

Replace a row with fresh defaults.

rows is a ComputedRef<FieldArrayRow[]>. Each row exposes index, key, and fields — the nested FieldDefinition[] with prefixed paths for that row. count is the current number of rows.