How to dynamically create radio button groups?

PBeck

How can I dynamically create radio button groups within v-for directive?

I have a q-option-group with a v-for loop which I want to create multiple radio button groups for each card:

<div v-for="(data, index) in reviewData" :key="data.question.QuestionId">
  <q-option-group
    :options="options"
    label="someLabel"
    type="radio"
    v-model="group" 
<!-- How do I dynamically assign this? Ex) v-model="group + index" -->
<!-- same for options -->
  />
</div>

<script>
export default {
    name: 'QuizResults',
  data () {
      return {
           group0: [],
           group1: [],
           options0: []

or if there is a better way to handle the options and v-model binding im all ears.

Thanks in advance.

tof06

@PBeck Do you really want/need to have separate vars for groupX and options ? Can’t an array do the trick ?

Have a look at this pen : https://codepen.io/cp-tof06/pen/xxGBzKr?editable=true&editors=101
This is how I would solve your problem.

Basically, I would keep selected value and options inside reviewData, and I made a computed property to access to selected value easily. If you can’t update reviewData for whatever reason, you can make a computed property to create a new one.

s.molinari

Yup. The key is to “pass down” the options in the array you are looping through. Theoretically, that is how your data should be modeled anyway? So, in other words, there are two things you need. The model to form the option groups and available selections, and the “reply” from the user, which is a state change in the selections. They all need to be in the same model for this to work.

Scott

PBeck

@tof06 Well the reason I had it that way is because I am looping through an array which contains a question and its answers. What I am trying to do is display the question and then underneath have the radio buttons showing the answer options and make the answer they chose the selected one. Therefore I need 1 radio button group created based on the outer loops question and answers. I can create the options and labels, it’s the targeting of the group that I am having issues with.

I like your method of putting them all in the array. I just still don’t know how to target the appropriate group using data from the outer loop.

For now I have solved it with v-if and v-else so that if loop is index 0 then display first radio group else display second group. Which fine for now but when I have 12 questions to be reviewed instead of 2 it is not going to ideal.

Hopefully I haven’t wasted your time and if you still feel like trying to help me find a better solution here is the data structure im looping through and need to create 1 radio button group per question:

[
    {
      Id: 1,
      Question: {id: 1,text: "Q1 text", answers:["1","2","3","4"]},
      Correct: true,
      Answer: "1"
    },
    {
      Id: 2,
      Question: {id: 2, text: "Q2", answers ["1","2","3","4","5"]},
      Correct: false,
      Answer: "3"
    }
]

s.molinari

Not sure this will help, but have a look. https://jsfiddle.net/smolinari/65meb0px/

I built it some time ago and that is why it is version 0.17, but the concepts are still all the same.

Scott

PBeck

@s-molinari Yeah its cool but unfortunately doesn’t really help me as I didn’t see any examples of loading option groups based on a v-for loop on parent container. Thanks for the response though, do appreciate it!

s.molinari

What you can also do is just not use option groups and build what you need out of regular check boxes.

Scott

PBeck

@tof06 Finally! After looking over your example for the 1000th time I finally made some changes with your code that allowed me to achieve what I wanted. Since I couldn’t make the v-for in the q-options-group, I made the v-model the model at the index of the outer v-for loop index. I also implemented your array structure for the q-option-group. Like so:

<div class="q-pa-md q-mb-md" v-for="(reviewQuestion, index) in reviewQuestions" :key="reviewQuestion.question.QuestionId">
   <q-option-group
     :options="reviewData[index].options"
     type="radio"
     v-model="reviewData[index].selected"
     disable
   />
</div>



export default {
    name: 'QuizResults',
  data () {
      return {
         reviewData: [
              {
                  id: 'group0',
                  options: [],
                  selected: null
              },
              {
                  id: 'group1',
                  options: [],
                  selected: null
              }
          ]
}

Thanks for much for your help!