@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!

@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!

@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!

@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"
    }
]

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.