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

Question

I want to set questions from an pre-select question using Vue.js.

I was able to get this working with an Radio button that once is checked it shows new set of questions.

I´m trying to the same using drop-down selection, once value is set on the dropdown, will show the set of Radio button questions

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

Above is my working progress with Radio/Radio

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

I need help to do the same using an Select-option to define Radio questions

Answer 1

Something like this should work:

 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>