I have a piece of code that use Vue-Formulate with group feature and I try to implement custom button to remove nested items;
<FormulateInput
type="group"
:name="field.name"
v-bind="field.attributes"
remove-position="after"
>
<div ....>
<div .... v-for loop>
<FormulateInput
:type="_field.type"
:name="_field.name"
....
/>
</div>
</div>
<div slot="remove"> <!-- adding slot to customize remove -->
<FormulateInput
type="button"
>
Remove Student
</FormulateInput>
</div>
</FormulateInput>
Such addiction change default <a ...>
link to button but functionality of removing item being lost.
Documentation of this slot says:
"The remove button when repeatable. The context object in this slot includes the index and a removeItem function that should be called to remove that item."
I am not sure how to add removeItem
function call to it.
The removeItem
slot prop is only provided to repeatable groups, so make sure to set repeatable
on the FormulateInput
with type=group
.
To insert a custom remove-button in the remove
scoped slot, wrap the button in a <template v-slot:remove="{ removeItem }">
, and set removeItem
as the button's click
-handler via the v-on
directive (@click
for shorthand):
<FormulateInput type="group" repeatable 1️⃣>
<FormulateInput name="name" label="Student’s name" />
<FormulateInput type="email" name="email" label="Student’s email" />
2️⃣
<template v-slot:remove="{ removeItem }">
<FormulateInput type="button" @click="removeItem"> Remove Student </FormulateInput>
</template>
</FormulateInput>