Checking checkbox A, triggers checkbox A & B. But checking checkbox B should only trigger checkbox B in Vuetify

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>

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 on v-checkbox

Advertisement

Answer