VueJS Vuelidate and deep nested Array/objects

Viewed 77

hope someone can help me I'm working on this since 2 days. I have the following Data in my component:

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

I want to validate all the checkboxes (they have v-model on this selected attributes here!), to be checked, if the parent value required (see my data required!) is true. My Validations looks like this but I miss a last little bit of help to get this required value into my validator selected requiredIf function.

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

Hope you understand me right. My Template looks like this:

<div class="mb-3" v-for="type in agreementTypes" :key="type.id">
              <h3 class="text-primary">{{ type.displayName }}</h3>
              <ul class="list-unstyled">
                <li v-for="agreement in type.agreements" :key="agreement.id">
                  <p>{{ agreement.description }}</p>
                  <div class="mb-3 form-check form-switch">
                    <input
                      class="form-check-input"
                      type="checkbox"
                      role="switch"
                      :checked="agreement.active"
                      :id="agreement.id"
                      :required="agreement.required"
                      v-model="agreement.selected"
                    />
                    <label class="form-check-label" for="agreements">{{ agreement.label }}<span v-if="agreement.required">**</span></label>
                  </div>
                </li>
              </ul>
            </div>

Any Help will be apreshiated!

bye, Marcel

0 Answers
Related