FieldArray

The <FieldArray> component lets you create repeatable array fields in your forms.

Basic Usage

vue

<script lang="ts" setup>
import { useForm } from 'vue-formify';

const { Form, FieldArray, handleSubmit } = useForm();

const sendForm = handleSubmit((data) => {
	console.log(data);
});
</script>

<template>
	<Form @submit="sendForm">
		<FieldArray name="links" v-slot="{ fields, add, remove }">
			<fieldset v-for="(field, index) in fields" :key="field.id">
				<Field :name="`links[${index}]`" />
				<button type="button" @click="remove(index)">Remove</button>
			</fieldset>
			<button type="button" @click="add">Add</button>
		</FieldArray>
		<button>Send</button>
	</Form>
</template>

Important note

When using v-for on fields, always use field.id for the :key attribute and use index as the array index. Otherwise, it may not work as expected.

API Reference

Props

Prop	Description
name	Field name
default	Field default value
rule	Field-level schema validation (StandardSchema)
preserve	Preserve field value when the field is unmounted
as	Wrapper element to render (default input)

Slots

Slot	Parameter	Description
default	{ fields, add, remove, error }	fields: Generated fields for rendering error: FieldArray error value add: Add new field remove: Remove field from array