Using v-for to create radio buttons

I am trying to make a component that will create a radio button input for each question object in my array. The ultimate goal will be to create inputs in my front end from questions stored in a backend DB.

My problem is that I can’t get the text from the options object in my array to display. I also am having trouble binding the values.

How can I use this array–or another similar method–to create radio button questions from a database? Any help is appreciated!

The array is as follows:

answers:[
        {type: "radio", text:"Do all tigers roar?", options:[{text: "yes", value: "first"},{text: "no", value: "2"}]},
        {type: "radio", text:"Do all bulldgos play?", options:[{text: "yes", value: "first"},{text: "no", value: "2"}]}
      ]

My radio button html template code is as follows:

<template>
  <div class="Example container">
<div class="col s12 radio">
  <form action="#">
    <div v-for="(answer, index) in answers" :key="index">
     <label>
      <div v-for="(option, index) in answers" :key="index">
        <input type="radio" v-model="selected">
      <span>{{answer.options}} </span>
      </div>
       </label>
    </div>
  <span>value: {{selected}}</span>
  </form>
</div>
</div>
</template>

My javascript (including the array) is:

<script>
export default {
  name: 'Example',
  data(){
    return{
      color: '',
      selected: 'first',
      selection:[],
       
      answers:[
        {type: "radio", text:"Do all tigers roar?", options:[{text: "yes", value: "first"},{text: "no", value: "2"}]},
        {type: "radio", text:"Do all bulldgos play?", options:[{text: "yes", value: "first"},{text: "no", value: "2"}]}
      ]
    }
  },
  methods: {
    selectAnswer(){
      console.log(this.selected)
    },
  }
}
</script>


Hi grantvue,

is that what you try to achieve? https://jsfiddle.net/awacode/7dbsx0Lh/

I see several problems within your code.

  1. nested v-for loops both using the variable ‘index’, should be named differently
  2. your second v-for is nested in your first v-for, but it iterates over the exact same object as the first v-for, the only difference is the naming of the resulting loop object. In fact ‘answer’ and ‘option’ in your code is the same object. Your second v-for loop needs to iterate over answer.options instead of answers.
  3. your answer object which is more a kind of question object, contains several answer options, so you need a radio group, which means so much input elements as answers are available but all with the same name attribute but different values. Then you need to check which of those option values equals the value of your ‘selected’ variable to find out which one to set selected.
    What you did here with v-model=“selected” is to bind the radio inputs value to the ‘selected’ variable, but i guess what you wanted to achieve is to check if the radio inputs value equals the ‘selected’ variables value to set the radio state to selected

Best regards, Annick

1 Like

Annick, Thanks for the help! This is exactly what I have been trying to get to!

I am new to Vue and learning by doing. Few of the tutorials out there do a v-for within v-for so I really appreciate it. Most hard code their radio buttons in the HTML.

Grant

No problem at all. I’m happy that i could help! Have fun learning vue.js, it’s so worth it!