1

我有一段代码使用 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 ...>链接到按钮，但删除项目的功能会丢失。这个插槽的文档说：

“可重复时的删除按钮。此插槽中的上下文对象包括索引和一个 removeItem 函数，应调用该函数来删除该项目。”

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

4

1 回答 1

3

  1. removeItemslot 道具仅提供给可重复的组，因此请确保设置repeatable在FormulateInputwith 上type=group。

  2. remove 要在作用域插槽中插入自定义删除按钮，请将按钮包装在 a 中，并通过指令（简写）<template v-slot:remove="{ removeItem }">设置removeItem为按钮的click-handler ：v-on@click

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

演示

于 2022-02-13T00:28:36.590 回答