How to validate checkbox group with Vuetify
Why don't you define your selected
field of your model an array, and bind it the checkboxes like below?
<v-checkbox class="pr-6" v-model="selected[0]" label="A" value="a"></v-checkbox>
<v-checkbox class="pr-6" v-model="selected[1]" label="B" value="b"></v-checkbox>
<v-checkbox class="pr-6" v-model="selected[2]" label="C" value="c"></v-checkbox>
For validation:
return this.selected.filter(s => s === true).length > 0
It can be done with an array as v-model
. Just use computed property for validation:
computed: {
rules() {
return [
this.selected.length > 0 || "At least one item should be selected"
];
}
}
Here is the Codepen
Also pay attention how hide-details
property of v-checkbox
is used.