Динамические массивы полей
Определение схемы
ts
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 },
],
},
]name подполей — простые ('name', а не 'members.name') — useFieldArray добавляет им префикс 'members.0.name', 'members.1.name', ... для каждой строки; предварительно префиксированное имя задвоилось бы ('members.0.members.name').
FormRenderer автоматически рендерит ArrayField с кнопками добавления/удаления.
Composable useFieldArray
ts
import { useFieldArray } from '@macrulez/vue-form-schema'
const { rows, count, append, prepend, remove, move, swap, replace } = useFieldArray(form, 'members')append(defaults?)
Добавить строку в конец.
prepend(defaults?)
Добавить строку в начало.
remove(index)
Удалить строку.
move(from, to)
Переместить строку.
swap(a, b)
Поменять местами две строки.
replace(index, defaults?)
Заменить строку на новую с defaults.
rows — это ComputedRef<FieldArrayRow[]>. Каждая строка предоставляет index, key и fields — вложенный FieldDefinition[] с префиксированными путями для этой строки. count — текущее количество строк.