Question

所以我有几个checkboxes，其中两个应该像radiobuttons一样工作，这意味着如果我单击一个，则另一个应该被禁用，反之亦然（我知道我可以使用{ {1}}，但我需要使用radiobuttons）。最好的方法是什么？

这是这两个checkboxes的代码：

checkboxes

Answer 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

Answer 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; } }
  }

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

2 个答案: