No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to dynamically create radio button groups?

    Help
    q-option-group
    3
    8
    1126
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      PBeck last edited by

      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.

      T 1 Reply Last reply Reply Quote 0
      • T
        tof06 @PBeck last edited by

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

        1 Reply Last reply Reply Quote 2
        • s.molinari
          s.molinari last edited by

          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

          1 Reply Last reply Reply Quote 0
          • P
            PBeck last edited by 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"
                }
            ]
            
            1 Reply Last reply Reply Quote 0
            • s.molinari
              s.molinari last edited by

              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

              1 Reply Last reply Reply Quote 0
              • P
                PBeck last edited by

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

                1 Reply Last reply Reply Quote 0
                • s.molinari
                  s.molinari last edited by

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

                  Scott

                  1 Reply Last reply Reply Quote 0
                  • P
                    PBeck last edited by 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!

                    1 Reply Last reply Reply Quote 1
                    • First post
                      Last post