vue-formulate 组自定义删除不工作

Question

我有一段代码使用具有组功能的 Vue-Formulate，我尝试实现自定义按钮来删除嵌套项；

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

此类成瘾将默认 <a ...> link 更改为按钮，但具有删除丢失物品的功能。这个插槽的文档说：

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

我不确定如何向它添加 removeItem 函数调用。

Answer 1

removeItem 插槽道具仅提供给 repeatable groups，因此请确保在 FormulateInput 上设置 repeatable 和 type=group.
要在 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 指令中插入自定义 remove-button (@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

vue-formulate 组自定义删除不工作

vue-formulate group custom remove not working

vue.js

vue-formulate

vue-slot