vue-formulate group custom remove not working

Question

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.

Answer 1

1. The removeItem slot prop is only provided to repeatable groups, so make sure to set repeatable on the FormulateInput with type=group.

2. 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>

demo