当v-收音机处于激活和禁用状态时如何初始化无线电组

Question

我使用vuetify和vue js 2.6我有一个包含5v无线电的v-无线电组，我有2个v-复选框，我使用这些复选框来启用/禁用无线电框：

1. 问题一:当其中一个无线电盒被禁用和激活时，如何初始化v-无线电组.
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

我恭敬地不同意延斯的v型说法。根据武雅博士，v-模型是在表单输入上创建双向数据绑定的指令。

这个帖子完美地解释了为什么你应该使用v模型。

tldr：v-模型在本质上与：

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

因此，要回答你的问题，我提议的是，只要一个v-复选框已经被选中，就可以简单地禁用一个。

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