CODEWITHSUNDEEP
javascriptvue.jsradio-buttonfrontendvuetify.js
Mohammed Affan
Mohammed Affan

Reputation: 25

Both radio buttons getting checked while using vuetify

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

Upvotes: 0

Views: 1540

Answers (1)

Asim Khan
Asim Khan

Reputation: 2039

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>

Upvotes: 1

Related Questions