In my form questionnaire, I am looping through an array of objects. Each object has five properties, but only one property needs validation. The validation setup in the component looks like this:
specificGifts: {
$each: {
passThrough: {
required: requiredIf(function(value) {
return this.docs.includes('Will')
})
}
}
},
After reading the vuelidate documents, I realized that instead of the code snippet below in my form html:
<div
v-for="(gift, i) in specificGifts"
:key="i"
>
<v-select
label="How does this specific gift pass if the recipient does not survive?"
v-model="gift.passThrough"
:items="specificGiftPassThrough"
></v-select>
</div>
I should be using:
<div
v-for="(gift, i) in $v.specificGifts.$each.$iter"
:key="i"
>
<v-select
label="How does this specific gift pass if the recipient does not survive?"
v-model="gift.passThrough.$model"
:items="specificGiftPassThrough"
></v-select>
</div>
The data section of my vuejs component is as follows:
data(){
return{
specificGifts: []
}
}
However, when running the code, I encounter the error "Cannot read property $model of undefined". Even after debugging by checking $v.specificGifts.$each.$iter, I still face more console errors. Can anyone provide insight into what could be going wrong? Is there a better approach to handling validation without having to manually loop through a $v property just for vuelidate?