使用Vuelidate的between校验器实现动态范围校验时报错如何解决

报错原因 #

你当前的写法中validations被定义为静态对象，在组件初始化解析该配置项时，组件实例尚未创建完成，this不指向当前组件实例，因此this.stats取值为undefined，读取limit属性自然会抛出错误。

解决方法 #

将validations选项修改为返回校验规则对象的函数，函数执行时组件实例已经初始化完成，this可以正确指向当前组件实例，就能正常读取stats.limit的值：

import { required, between } from "vuelidate/lib/validators";

validations() {
  return {
    stats: {
      score: {
        // 此时this可正常访问组件的data属性
        between: between(0, this.stats.limit)
      }
    }
  }
}

补充说明 #

如果后续你需要动态修改stats.limit的取值，该写法也可以自动同步更新校验阈值，无需额外做监听处理，完全适配动态取值的校验需求。

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