I am looking to generate questions from a pre-selected list using Vue.js.
I have successfully implemented this with a radio button that reveals a new set of questions once checked.
Now, I want to achieve the same functionality using a dropdown selection. When a value is chosen from the dropdown, it should display a set of radio button questions.
Below is the code snippet for my current test:
<div id="app">
<select v-model="selectedL">
<option v-for="l in list" v-bind:value="{ id: l.id, text: l.name }">{{ l.name }}</option>
</select>
<div v-for="r in list.text" :key="r.id">
<input type="radio" :value="r" v-model="selectedR" :id="r.id" :name="r.id">
<label class="label" v-bind:for="r.id">{{r.name}}</label>
</div>
</div>
var app = new Vue({
el: '#app',
data: {
selectedL: '',
selectedR: '',
list: [
{
id: 1,
name: 'A',
text:[
{
text1: '123',
text2: '456'
}
]
},
{
id: 2,
name: 'B',
text:[
{
text1: '678',
text2: '908'
}
]
},
{
id: 3,
name: 'C',
text:[
{
text1: '143',
text2: '786'
}
]
}
]
}
})
The above code represents my progress with Radio buttons.
https://jsfiddle.net/bernlt/pvndg8jf/11/
I require assistance in achieving the same functionality by using a Select-option to determine the Radio questions.