Vee Validate可重复表单主联系人Checkbox校验错误清除问题

你当前遇到的校验错误不消失的核心原因是：自定义校验规则仅会在当前交互的Checkbox对应的ValidationProvider上触发，你修改其他行的primaryContact状态时，其余行的主联系人校验器没有自动执行重新校验，导致旧的错误信息残留。

按照以下步骤修改即可解决问题，且不会影响其他字段的校验规则和错误提示：

1. 给每个主联系人的ValidationProvider设置唯一的vid标识，方便后续精准调用
   修改模板中对应部分代码：

<ValidationProvider
  #default="{ errors }"
  :rules="{ chk_primary_contact: [contactDtos, item.id] }"
  name="Primary contact"
  :vid="`PrimaryContact-${item.id}`"
>

2. 给主联系人Checkbox添加change事件监听，触发所有主联系人校验器重新校验
   修改Checkbox代码：

<b-form-checkbox
  v-model="item.primaryContact"
  :state="errors.length > 0 ? false : null"
  @change="triggerPrimaryContactValidate"
>

3. 在methods中新增主动触发校验的方法

triggerPrimaryContactValidate() {
  this.contactDtos.forEach(item => {
    // 拿到对应行的主联系人校验实例，执行校验
    const validateInstance = this.$refs.contactValidation.$refs[`PrimaryContact-${item.id}`]
    validateInstance?.validate()
  })
}

你当前代码中b-form-checkbox同时使用了v-model和:checked属性属于冗余写法，v-model已经实现了双向绑定，可直接删除:checked="item.primaryContact"属性。

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