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
    1. Home
    2. PBeck
    P
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 4
    • Best 1
    • Groups 0

    PBeck

    @PBeck

    1
    Reputation
    3
    Profile views
    4
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    PBeck Follow

    Best posts made by PBeck

    • RE: How to dynamically create radio button groups?

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

      posted in Help
      P
      PBeck

    Latest posts made by PBeck

    • RE: How to dynamically create radio button groups?

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

      posted in Help
      P
      PBeck
    • RE: How to dynamically create radio button groups?

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

      posted in Help
      P
      PBeck
    • RE: How to dynamically create radio button groups?

      @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"
          }
      ]
      
      posted in Help
      P
      PBeck
    • How to dynamically create radio button groups?

      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.

      posted in Help
      P
      PBeck