时间戳

首页 > 解决方案 > 在 Vuelidate/VueJS 中访问当前范围之外的验证属性？

vue.js - 在 Vuelidate/VueJS 中访问当前范围之外的验证属性？

问题描述

给定 Vue 2 中使用vuelidatefrom 属性验证的以下组件：

<template>
  // template stuff here...
</template>

<script>
import { validationMixin } from "vuelidate";
import { required, requiredIf } from "vuelidate/lib/validators";

export default {
  name: "ParentComponent",
  mixins: [validationMixin],
  data() {
    return {
      selected: false,
      user: {
        email: null,
        password: null,
      },
    };
  },
  validations: {
    selected: { required },
    user: {
      email: { required: requiredIf((vm) => vm.selected) },
      password: { required: requiredIf((vm) => vm.selected) },
    },
  },
};
</script>

属性user.email和user.password是必需的，但前提是验证selected成功通过。但是，这种方法似乎不起作用，可能是因为selected它不是user验证对象的一部分。

有没有办法访问这个验证属性？像这样的东西...

 validations: {
    selected: { required },
    user: {
      email: { required: requiredIf((vm) => vm.$parentVm.selected) },
      password: { required: requiredIf((vm) => vm.$parentVm.selected) },
    },
  },

标签： vue.jsvuejs2vuelidate

解决方案

就这样。演示https://codesandbox.io/s/green-darkness-90fjs。 requiredIf解决这个问题的好方法

推荐阅读