VueJS Vuelidate и глубокий вложенный массив/объекты

#vuelidate

#вуэльта

Вопрос:

надеюсь, кто-нибудь сможет мне помочь, я работаю над этим уже 2 дня. В моем компоненте есть следующие данные:

 var types = [  {   **required**: true,  agreements: [  { selected: true, desc: 'red' },  { selected: false, desc: 'green'}  ]  },  {   required: false,  agreements: [  { selected: false, desc: 'red' },  { selected: false, desc: 'green'}  ]  }, ];  

Я хочу проверить все флажки (у них есть v-модель для выбранных атрибутов здесь!), чтобы проверить, соответствует ли требуемое родительское значение (см. Мои требуемые данные!). Мои проверки выглядят так, но мне не хватает последней небольшой помощи, чтобы ввести это требуемое значение в мою функцию проверки, выбранную RequiredIf.

 validations: {  types: {  $each: {  agreements: {  $each: {  selected: {  requiredIf: (value) =gt; value === value.parent.required  }  }  }  }  } }  

Надеюсь, вы меня правильно поняли. Мой шаблон выглядит так:

 lt;div class="mb-3" v-for="type in agreementTypes" :key="type.id"gt;  lt;h3 class="text-primary"gt;{{ type.displayName }}lt;/h3gt;  lt;ul class="list-unstyled"gt;  lt;li v-for="agreement in type.agreements" :key="agreement.id"gt;  lt;pgt;{{ agreement.description }}lt;/pgt;  lt;div class="mb-3 form-check form-switch"gt;  lt;input  class="form-check-input"  type="checkbox"  role="switch"  :checked="agreement.active"  :id="agreement.id"  :required="agreement.required"  v-model="agreement.selected"  /gt;  lt;label class="form-check-label" for="agreements"gt;{{ agreement.label }}lt;span v-if="agreement.required"gt;**lt;/spangt;lt;/labelgt;  lt;/divgt;  lt;/ligt;  lt;/ulgt;  lt;/divgt;  

Любая помощь будет оказана!

пока, Марсель