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

Question

I am creating all the generic used components like Inputs etc using vuetify and resuing them in a project but radio button behavior is not what I want both of them are getting checked instead of one and is not functional too

I've tried normal input tag without the vuetify v-radio component and it works fine but vuetify radio button is not working

Parent component

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

and in data property i have

      radois: null,
      defaultShift: 0,
      nightShift: 1

Child Component

<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>

Expected Results are one of them getting checked when clicked and having clicked value and vice versa but rather both of them are getting checked and throwing undefined

Answer 1

this is because each child component creates separate v-radio-group. if you create a separate component for v-radio-group and use it as a wrapper on your child component then it should work.

example.

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>

Now you can use these as below

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