通过选中 vuetify 中的另一个复选框来禁用复选框答案

【问题标题】：Disabling a checkbox by checking another checkbox in vuetify通过选中 vuetify 中的另一个复选框来禁用复选框
【发布时间】：2018-12-11 23:32:08
【问题描述】：

所以我有几个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>

【问题讨论】：

标签： javascript vue.js checkbox vuejs2 vuetify.js

【解决方案1】：

尝试处理@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>

你可以查看pen

【讨论】：

【解决方案2】：

您的两个值不是相互独立的；一个定义另一个。因此，您应该只有一个 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; } }
  }

【讨论】：