Recently, I attempted to implement a default value in a custom radio component that I developed.
Below is the code snippet:
<template>
<div class="custom-radio-button">
{{value}}
<div v-for= "item in localValue">
<input type="radio" :value="item.value" name=item.name @click=onSelected(item.value) >
<span>{{item.label}}</span>
</input>
</div>
</div>
<script>
import Vue from 'vue'
const name = 'CustomRadioButton'
export default {
name,
componentName: name,
props: [ 'name', 'value', 'isDefault', 'label'],
data() {
return {
localName: this.name,
localValue: this.value
}
},
methods: {
onSelected (value) {
this.$emit('clicked', value)
}
}
}
</script>
I used the component as shown below:
<CustomRadioButton :value=RadioFieldData @clicked="isRadioButtonSelection" isDefault='yellow'></CustomRadioButton>
Here is the accompanying JSON data:
RadioFieldData:[
{label:'Fire', value:'red', name:'colour' },
{label:'Sun', value:'yellow', name:'colour',isDefault:'yellow'},
{label:'Water', value:'blue', name:'colour'}
]
My query revolves around the best approach for passing the value "yellow" to the radio button group. Suggestions?