I have a main component named Stepper that includes a child component called ShortSummary. I am attempting to pass a property from Stepper to ShortSummary by clicking on a radiobutton, but it is not working! Here's my setup. This is the code for Stepper:
<v-radio-group row v-model="voltage" >
<v-radio
v-for="n in radioNames"
:key="n"
:label="n"
:value="n"></v-radio>
</v-radio-group>
<app-short-summary :voltage="voltage" ></app-short-summary>
<script>
import ShortSummary from "./ShortSummary";
data() {
return {
voltage:'',
radioNames:
['24V to 36V',
'48V to 72V',
'96V to 110V']
},
components:{
appShortSummary: ShortSummry
}
}
</script>
And this is the content of ShortSummary:
<v-list-tile
:key="item.title"
avatar
ripple
@click="toggle(index)">
<v-list-tile-content>
{{item.action}}
</v-list-tile-content>
</v-list-tile>
<script>
export default {
props:['voltage']
data () {
return {
selected: [2],
items: [
{
action: `Voltage: ${this.voltage}`
},
{
action: 'Weight: POOF'
},
{
action: 'Size: BOOM'
},
{
action: '2oo2? Need the logic document'
},
{
action: 'Price: Very very expensive'
}
]
}
},
}
</script>
The issue I'm facing is that the field for voltage is currently empty. I want Voltage: ${this.voltage} to display the value of the selected voltage from the radiobutton on the Stepper component.