vuelidate 中的可選嵌套驗證

Question

在 vuelidate 中添加可選驗證對象的正確方法是什么？

給定一個驗證形狀：

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

                size: {
                    required
                },

                power: {
                    required
                }
            }
        }
    }
}

我的期望是，對於bike類型的車輛，我不需要提供尺寸和功率，因為​​不需要它們的母engine 。 但是驗證返回無效。

Answer 1

您可以做的不是要求引擎的每個子字段都是必需的，而是要求每個引擎同時具有size和power ，以便每次有引擎時，它都必須具有這些鍵。 將其與 requiredIf 一起添加，您將得到以下內容： Every vehicle must have a type, if it is a car then an engine is required and every engine must have a power and size 。

以下代碼段顯示了它的工作原理。

 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>

Answer 2

我最近遇到了類似的情況並使用“parentVm”解決了問題，如https://vuelidate.js.org/#sub-accessing-component 中所述。

你應該試試這個：

...

engine: {
  required: requiredIf((parentVm) => {return parentVm.type === 'car'}),
  size: {between: between(yourMinValue, yourMaxValue)},
  power: {between: between(yourMinValue, yourMaxValue)},
} 
...