Skip to content

Динамические массивы полей

Определение схемы

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 — текущее количество строк.