I have two checkboxes in Vuetify. I’m trying to write them in a way that if I check checkbox A, it automatically checks both checkbox A & B. But clicking on checkbox B triggers only checkbox B. What’s the best way to do it? Here is my code:
<v-checkbox label="A" value="A" v-model="A"> </v-checkbox> <v-checkbox label="B" value="B" v-model="B"></v-checkbox>
Advertisement
Answer
There are few solutions to handle it.
- You can use Vue watch
<template> <div> <v-checkbox label="A" v-model="A"> </v-checkbox> <v-checkbox label="B" v-model="B"></v-checkbox> </div> </template> <script> export default { ... watch: { A: function (newVal) { if (newVal) { this.B = true } } } ... } </script>
- Using
@change
event onv-checkbox