使用select选项从JSON动态设置Radio按钮

Question

我想使用Vue.js.从预选问题中设置问题

我可以用一个单选按钮来处理这个问题，一旦选中，它就会显示一组新的问题。

我正在尝试使用下拉选择，一旦在下拉列表上设置了值，就会显示一组单选按钮问题

这是我目前的测试：

<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'
}
]
}
]
}
})

以上是我在Radio/Radio 的工作进展

https://jsfiddle.net/bernlt/pvndg8jf/11/

我需要帮助使用选择选项来定义无线电问题

Answer 1

这样的东西应该可以工作：

var app = new Vue({
el: '#app',
data: {
selectedL: '',
selectedR: '',
list: [{
id: 1,
name: 'A',
text:[{
id: 123,
question: '123',
},
{
id: 456,
question: '456',
}]
},
{
id: 2, 
name: 'B',
text:[{
id: 678,
question: '678',
},
{
id: 908,
question: '908',
}]
},
{
id: 3, 
name: 'C',
text:[{
id: 143,
question: '143',
},
{
id: 786,
question: '786',
}]
}]
	}
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<select v-model="selectedL">
<option v-for="l in list" v-bind:value="l">{{ l.name }}
</option>
</select>

<p>Questions:</p>
<div v-for="(r, index) in selectedL.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.question}}</label>
</div>

<p>selected Id from select: {{selectedL.id}} </p>
<p> selected Id from radio: {{selectedR.id}} </p>
</div>