Skip to content

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

PropDescription
nameField name
schemaSchema validation
ignoreIgnore field when extracting data
preservePreserve field value when the field is unmounted

Slots

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