Question

我正在使用vuetify创建所有常用的组件（如Inputs等）并将其继续在项目中进行，但是单选按钮的行为不是我希望它们都被检查而不是一个都不能检查的功能

我尝试了不带vuetify v-radio组件的普通输入标签，它工作正常，但vuetify单选按钮不起作用

父组件

<c-radio name="radio1" v-model="radois" :value="defaultShift"></c-radio>

在数据属性中，我拥有

      radois: null,
      defaultShift: 0,
      nightShift: 1

子组件

<div>
 <v-radio-group>
   <input type="radio" :name="name" v-model="values" :value="value" @change="inputChange" />
   <!-- <v-radio :name="name" :value="value" @change="inputChange" /> -->
 </v-radio-group>
</div>
</template>

<script>
export default {
model: {
 prop: 'values',
 event: 'change'
},
data() {
 return {
   radio: null,
   radioValue: this.label
 }
},
props: {
 // label: String,
 // label: String,
 value: Number,
 values: Number,
 name: String
},
methods: {
 inputChange(e) {
   console.log(e.target.value)
   this.$emit('change', event.target.value)
 }
}
}
</script>

<style lang="scss" scoped>
</style>

预期结果是其中之一在单击时被检查并具有单击值，反之亦然，但它们两个都在被检查并且未定义时抛出

Answer 1

这是因为每个子组件都创建了单独的v-radio-group。如果您为v-radio-group创建一个单独的组件并将其用作子组件的包装，那么它应该可以工作。

示例。

MyRadioGroup.vue

<template>
  <v-radio-group> <!--also props for these if required-->
  </v-radio-group>
</template>

MyRadio.vue

<template>
  <v-radio :name="name" :value="value" @change="inputChange" />
</template>

现在您可以按以下方式使用这些

<MyRadioGroup>
  <MyRadio></MyRadio>
  <MyRadio></MyRadio>
  <MyRadio></MyRadio>
</MyRadioGroup>

使用vuetify时选中两个单选按钮

1 个答案: