Vue js vuelidate无法读取动态验证架构中的自定义验证

时间:2018-11-11 14:37:26

标签: vue.js vuejs2 vuelidate

enter image description here

我有这个UI。如果用户选中All dates,则会将布尔变量is_all_dates设置为true。这意味着用户不在乎日期范围,他/她希望所有数据都无需通过过滤器进行过滤日期范围。

另一方面,如果用户没有检查All dates,我需要验证3件事。

  1. 他/她输入起始日期(必填
  2. 他/她输入日期(必填
  3. 从日期<到日期(自定义验证器

为达到此要求,我使用动态验证架构。

仅当All dates等于false时,我才需要验证。否则我根本不需要验证。

validations() {
        if (!this.is_all_dates) {
          return {
            from: {
              required
            },
            to: {
              required,
              date_greather_than
            }
          };
        }
      },

我这样声明date_greather_than验证。

<script>
    const date_greather_than = (value, vm) => {
      let from = new Date(vm.from);
      let to = new Date(value);
      return from < to;
    };
    export defaults:{
        validations(){},
        data(){return{}}
    }
</script>

但是问题是我出错了

  

TypeError:无法读取未定义的属性“ date_greather_than”

我的自定义验证器在validations()函数中无法识别

我可以这样使用关键字this。这是语法错误。

to: {
                  required,
                  this.date_greather_than
                }

1 个答案:

答案 0 :(得分:1)

我找到了答案。这里的问题是我仅指定if部分。通过指定部分和其他部分,我的代码可以按预期工作。

validations() {
    if (this.is_limit_by_range) {
      return {
        to: { required, date_greather_than },
        from: { required },
        status: { required }
      };
    } else {
      return {
        status: { required }
      };
    }
  }