Необязательная вложенная проверка в vuelidate - PullRequest
Новая
       17

Необязательная вложенная проверка в vuelidate

0 голосов
/ 14 февраля 2020

Как правильно добавить необязательный объект проверки в vuelidate?

Учитывая форму проверки: 

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

                size: {
                    required
                },

                power: {
                    required
                }
            }
        }
    }
}

Я ожидал, что для транспортного средства типа bike Мне не нужно указывать размер и мощность, так как их родитель engine не требуется. Однако проверка возвращает недействительным.

1 Ответ

1 голос
/ 18 февраля 2020

Что вы могли бы сделать вместо того, чтобы запрашивать каждое подполе необходимого двигателя, - это попросить, чтобы у каждого двигателя были и 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>
...