FieldArray

The <FieldArray> is a component for create repeatable array fields.

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) of 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 you using v-for on the fields always use the field.id in the :key attribute and use the index as array index. Otherwise it won't works as expected.

Api reference

Props

Prop	Description
name	Field name
schema	Schema valdation
ignore	Ignore field when extract data
preserve	Preserve field value when field is unmounted

Slots

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