I am handling an array in my project where values are either true or false. For this task, I am utilizing vuelidate.
selectedDays: [
false,
false,
false,
false,
false,
false,
false
],
In my template, the checkboxes toggle the values between true and false. A validation rule needs to be implemented to ensure that at least one checkbox is checked. If none are selected, the validation should trigger.
<p class="invalid-feedback mt-3" v-if="v$.selectedDays.$dirty && v$.selectedDays.$error">Please select workout days</p>
<template v-for="(item, index) in daysList" :key="item.id">
<v-checkbox
hide-details
color="indigo"
v-model="selectedDays[index]"
:label="item.title"
>
</v-checkbox>
</template>
This is the initial validation approach:
selectedDays: {
$each: helpers.forEach({
sameAs: sameAs(true)
})
}
Unfortunately, this method does not achieve the desired outcome. I attempted to implement a custom validation logic:
let check = this.selectedDays.some(function() {
if (this.selectedDays === true) {
return true;
} else {
return false;
}});
However, I am unsure how to integrate this custom validation within vuelidate. Any assistance would be greatly appreciated. Thank you!