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.

CodePudding user response：

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