Vue使用Vuelidate实现深层嵌套数组/对象复选框条件验证求助

问题核心原因 #

你当前的写法错误是因为requiredIf回调的第一个参数value仅代表当前selected字段的布尔值，本身不存在parent属性，所以无法获取到父级required的值。

可行解决方案 #

方案1：直接通过Vuelidate的验证节点层级访问父级属性

你使用的是嵌套$each的Vuelidate校验规则，可通过验证节点的$parent属性向上追溯父级数据，修改你的校验规则如下：

validations: {
    types: {
        $each: {
          agreements: {
            $each: {
              selected: {
                requiredIf: function () {
                  // 层级对应：selected节点 → agreements $each节点 → 当前type节点
                  return this.$parent.$parent.$model.required
                }
              }
            }
          }
        }
    }
}

注意：如果使用箭头函数会丢失this指向，需要改为普通函数写法。

方案2：抽离子组件简化校验（更易维护）

把单组协议的渲染和校验抽离为独立子组件，将当前type作为prop传入子组件，子组件内的校验规则可以直接读取prop的required值，无需追溯层级：
父组件模板：

<div class="mb-3" v-for="type in agreementTypes" :key="type.id">
  <h3 class="text-primary">{{ type.displayName }}</h3>
  <agreement-group :type="type" />
</div>

子组件接收type为prop，校验规则直接写：

props: ['type'],
validations: {
  type: {
    agreements: {
      $each: {
        selected: {
          requiredIf () {
            return this.type.required
          }
        }
      }
    }
  }
}

模板修复建议 #

你当前的模板存在两处冗余/错误：

• 不要同时给复选框绑定v-model和:checked，v-model已经自动处理选中状态，保留v-model="agreement.selected"即可，删除:checked="agreement.active"避免冲突
• label的for属性要和对应input的id匹配，把for="agreements"改为:for="agreement.id"，实现点击label触发复选框切换的效果

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