使用选择选项从 JSON 动态设置单选按钮

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>