Отключение флажка, установив другой флажок в vuetify

Question

Таким образом, у меня есть несколько checkboxes, и два из них должны работать как radiobuttons, что означает, что если я нажму на один, другой должен быть отключен, и наоборот (я знаю, что могу сделать это, используя radiobuttons, но янужно использовать checkboxes).Какой лучший способ сделать это?

Вот мой код для этих двух checkboxes:

<v-checkbox label="Check1" value="Check1" v-model="Check1" ></v-checkbox>

<v-checkbox label="Check2" value="Check2" v-model="Check2" ></v-checkbox>

Answer 1

Ваши два значения не зависят друг от друга;один определяет другой.Таким образом, у вас должен быть только один data элемент, а другой может быть вычисляемым для установки.

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

Если вы хотите, чтобы они не были полностью связаны - скажем, вы хотите, чтобы обаих отключите - вы сделаете два элемента data и на каждом из них будет watch, который выключит другой при включении.

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

Answer 2

Попробуйте обработать событие @change, которое обновит Check1 и Check2, следующим образом:

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

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

вы можете проверить это ручка