FieldArray

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

<script lang="ts" setup>
import { FormifyForm, FieldArray, Field } from 'vue-formify';

const sendForm = (data) => {
	console.log(data);
};

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

Api reference

Props

Prop	Description
name	Field name
initial-values	Field default value
ignore	Ignore field when extract data

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