I want to check a list of checkboxes when change a v-switch. What I have is this:
This is switch component, if selectAll is true I want to check all checkboxes:
<v-switch style="padding-right:15px;" v-model="selectAll" @change="handleChanging">
</v-switch>
Here is the list, each item has a checkbox before:
<v-list-item v-for="(item, index) in itemsEducators" :key="index">
<v-list-item-action>
<v-checkbox :key="item.title" :input-value="item.checked"> </v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
<v-list-item-subtitle>{{ item.institution }} </v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
An here is js function:
methods: {
handleChanging() {
if (this.selectAll === true) {
//here I want to check all checkboxes
} else {
//here to uncheck all
}
}
}
You can do using this:
handleChanging() {
if (this.selectAll === true) {
this.itemsEducators.forEach(x => x.checked = true);
} else {
this.itemsEducators.forEach(x => x.checked = false);
}
}