在VueJS的vuelidate中如何访问当前作用域外的验证属性？

解决方案 #

你遇到的问题本质是嵌套层级验证规则的回调第一个参数默认指向当前嵌套对象，而非根组件实例，vuelidate本身提供了两种原生方式可以直接访问根组件的data属性：

方法1：使用验证器回调的第二个参数

所有vuelidate内置验证器的回调函数支持传入两个参数，第一个是当前待验证的字段值，第二个就是完整的Vue组件实例，不受嵌套层级影响，直接修改你的规则即可生效：

validations: {
    selected: { required },
    user: {
      // 回调第二个参数就是根组件实例，直接取selected即可
      email: { required: requiredIf((val, vm) => vm.selected) },
      password: { required: requiredIf((val, vm) => vm.selected) },
    },
},

方法2：将validations定义为函数

vuelidate支持把validations配置为返回验证规则对象的函数，此时函数内部的this直接指向当前组件实例，你可以直接通过this访问所有data、computed属性：

validations () {
  return {
    selected: { required },
    user: {
      email: { required: requiredIf(() => this.selected) },
      password: { required: requiredIf(() => this.selected) },
    },
  }
}

两种方案都可以满足你的需求，不需要额外自定义$parentVm这类属性。

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