Vue Formulate自定义插槽中addMore事件与自定义增删按钮的使用方法

你当前自定义按钮点击失效的原因有两个：

• 插槽注入的context对象本身不存在addMore方法，直接调用不会触发任何内置逻辑
• 给<a>标签绑定for属性会触发原生的表单元素聚焦跳转行为，抢占你的点击事件逻辑

自定义新增按钮 #

对于开启multiple模式的group可重复字段，Vue Formulate在对应addMore插槽的上下文中，已经暴露了操作组的原生方法：

<template>
  <button type="button" @click="context.addGroupItem()">
    {{ context.addLabel || '添加更多' }}
  </button>
</template>

<script>
export default {
  props: {
    context: {
      type: Object,
      required: true
    }
  }
}
</script>

注意：必须使用带type="button"属性的元素，不要额外绑定for属性，避免原生默认行为干扰事件执行。

自定义移除按钮 #

针对单个重复组项的移除操作，项插槽的上下文中同样暴露了对应方法，直接调用即可：

<template>
  <button type="button" @click="context.removeGroupItem()">
    移除当前项
  </button>
</template>

• 不要通过手动修改组绑定的数组值实现新增/移除，这种操作会绕过Vue Formulate的内置校验、错误同步逻辑，导致表单状态和UI不同步
• 如果需要限制最大可添加项数，可以在调用addGroupItem前自行判断当前组长度，不符合规则时阻断方法执行

内容的提问来源于stack exchange，提问作者MSR