Disabling A Checkbox By Checking Another Checkbox In Vuetify

So I have several checkboxes and two of them should function like radiobuttons meaning that if I click on one, the other one should become disabled and vice versa (I know I can do

Solution 1:

Try to handle the @change event which will update the Check1 and Check2 as follows :

<v-checkboxlabel="Check1"value="Check1"v-model="Check1" @change="Check2=!Check1"></v-checkbox><v-checkboxlabel="Check2"value="Check2"v-model="Check2" @change="Check1=!Check2"></v-checkbox>

you could check this pen

Solution 2:

Your two values aren't independent of each other; one defines the other. So you should only have one data item, and the other can be a settable computed.

data: {
    Check1: true
  },
  computed: {
    Check2: {
      get() {
        return !this.Check1;
      },
      set(newValue) {
        this.Check1 = !newValue;
      }
    }
  }

If you did want them to be not completely linked – say you want to be able to have both of them off – you would make two data items and have a watch on each that turns the other off when this one is turned on.

data: {
    Check1: true,
    Check2: false
  },
  watch: {
    Check1(nv) { if (nv) { this.Check2 = false; } },
    Check2(nv) { if (nv) { this.Check1 = false; } }
  }