javascript - vuelidate 中可选的嵌套验证

Question

在 vuelidate 中添加可选验证对象的正确方法是什么？

给定验证形状:

validations: {
    vehicles: {
        $each: {
            type: {
                required
            },
            engine: {
                required: requiredIf((vehicle) => vehicle.type == 'car'),

                size: {
                    required
                },

                power: {
                    required
                }
            }
        }
    }
}

我的期望是，对于自行车类型的车辆，我不需要提供尺寸和功率，因为​​不需要其父引擎。但是验证返回无效。

Answer 1

您可以做的不是要求引擎的每个子字段都是必需的，而是要求每个引擎都具有 size 和 power，这样每次都有引擎必须有这些 key 。将其与 requiredIf 一起添加，您将得到以下内容:每辆车都必须有一个类型，如果它是汽车，则需要一个发动机，并且每个发动机必须有一个功率和尺寸。

下面的代码片段显示它正在工作。

Vue.use(vuelidate.default);
let { required, requiredIf, helpers } = validators;
const contains = (param) =>
  (value) => !helpers.req(value) ||
    param.reduce((accum, curr) => accum && curr in value, true);
var app = new Vue({
  el: '#app',
  data: () => ({
    vehicles: [
      {
        type: 'car',
        engine: {
          size: 5,
          power: 2.5,
        }
      },
      {
        type: 'bike',
      }
    ]
  }),
  validations: {
    vehicles: {
      $each: {
        type: { required },
        engine: {
          required: requiredIf((value) => value.type === 'car'),
          contains: contains(['size', 'power']),
        }
      }
    }
  },
  created() {
    console.log(this.$v.$invalid);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.5/dist/vuelidate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.5/dist/validators.min.js"></script>
<div id="app"></div>