如何在 v-radio 处于活动和禁用状态时初始化 radiogroup

Question

我正在使用 vuetify 和 vue js 2.6 我有一个 v-radio-group，其中包含 5 个 v-radio 和 2 个 v-checkbox，我将这些复选框用于 enable/disable 个单选框：
1. 问题一：当其中一个单选框被禁用和激活时，如何初始化v-radio-group。
2. 我想切换复选框，只应选中两者之一，而不是同时选中两者

感谢每一次帮助并响应我的请求谢谢… 这是代码：

<template>
  <div> 
    <v-radio-group v-model="radiogroup">
      <v-radio label="Radio 1" value="radio1"></v-radio>
      <v-radio label= "Radio 2"value="radio2"></v-radio>
      <v-radio
        label="Radio 3"
        value="radio3"
        :disabled="check2 || check1"
      ></v-radio>
      <v-radio
        label="Radio 4"
        value="radio4"
        :disabled="check2"
      ></v-radio>
      <v-radio
        label="Radio 5"
        value="radio5"
        :disabled="disableradio"
      ></v-radio>
    </v-radio-group>
    <v-checkbox label="Check 2" v-model="check2"></v-checkbox>
    <v-checkbox label="Check 1" v-model="check1"></v-checkbox>
  </div>
</template>
<script>
export default {
  data() {
    return {
      disableradio: true,
      check1: false,
      check2: false,
      radiogroup: "radio1",
      },
    },
};
</script>

Answer 1

已更新，因为我没有完全回答问题。

第一个问题，能详细说说吗？当禁用和激活时，初始化是什么意思？

对于第二个问题，您描述的是一个无线电组（只能激活一个复选框）。但是，如果您真的希望它与复选框一起使用，以下内容可能会有所帮助：

<v-checkbox label="Check 1" v-model="check1" @change="check2=false"></v-checkbox>
<v-checkbox label="Check 2" v-model="check2" @change="check1=false"></v-checkbox>

由于 q1 的详细说明而进行的额外更新：

<template>
  <div> 
    <v-radio-group v-model="radiogroup">
      <v-radio label="Radio 1" value="radio1"></v-radio>
      <v-radio label= "Radio 2"value="radio2"></v-radio>
      <v-radio label="Radio 3" value="radio3" :disabled="check2 || check1"></v-radio>
      <v-radio label="Radio 4" value="radio4" :disabled="check2" ></v-radio>
      <v-radio label="Radio 5" value="radio5" :disabled="disableradio"></v-radio>
    </v-radio-group>
    <v-checkbox label="Check 2" v-model="check2" @change="checkboxHandler("check2")></v-checkbox>
    <v-checkbox label="Check 1" v-model="check1" @change="checkboxHandler("check1")></v-checkbox>
  </div>
</template>
<script>
export default {
  data() {
    return {
      disableradio: true,
      check1: false,
      check2: false,
      radiogroup: "radio1",
      },
    },
    methods: {
      checkboxHandler(type) {
        if (type === "check1") this.check2 = false
        if (type === "check2") this.check1 = false

        if (this.radiogroup === "radio3" && (this.check1 || this.check2) ) this.radiogroup = "radio1"
        if (this.radiogroup === "radio4" && this.check2 ) this.radiogroup = "radio1"
      }
    },
};
</script>

Answer 2

我非常不同意 Jens 的 v-model 声明。根据 vuejs docs v-model 是一个在表单输入上创建双向数据绑定的指令。

这 post 完美地解释了为什么你应该使用 v-model。

tldr ：v-model 本质上与：

相同

    <input
       v-bind:value="something"
       v-on:input="something = $event.target.value">

所以为了回答你的问题，我的建议是简单地禁用一个已选中的 v-checkbox。

    <v-checkbox label="Check 2" v-model="check2" :disabled="check1"></v-checkbox>
    <v-checkbox label="Check 1" v-model="check1" :disabled="check2"></v-checkbox>

如何在 v-radio 处于活动和禁用状态时初始化 radiogroup

How to initialize radiogroup when v-radio is active and disabled

checkbox

radio-button

vue.js

vuetify.js