[Vuejs]-Dynamically set Radio button from JSON using select option

by

0👍

✅

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>

Leave a comment