CODEWITHSUNDEEP
javascriptarraysloopsvue.jsv-for
newITguy
newITguy

Reputation: 19

Nested v-for with Vuejs

I've been researching for hours trying to figure out this issue. The goal is to print something like google form questionnaire that consists of question_group, question, and answer.

My data hierarchy is like this : 

question_group: [ { str : "Addition",
                    questions: [{ str: "1+1",
                                 tipe: "multiple_choice",
                                 answer_choice: [1, 2, 3, 4, 5]
                                 },
                               { str: "2+2",
                                 tipe: "multiple_choice",
                                 answer_choice: [1, 2, 3, 4, 5]
                               }
                              ] 
                   },
                   { str : "Subtraction",
                     questions: [{ str: "2-1",
                                  tipe: "multiple_choice",
                                  answer_choice: [1, 2, 3, 4, 5]
                                }
                               ] 
                   }
                 ]

My expected output :

Addition
1. 1+1
a. 1
b. 2
c. 3
d. 4
e. 5

2. 2+2
a. 1
b. 2
c. 3
d. 4
e. 5

Subtraction
1. 2-1
a. 1
b. 2
c. 3
d. 4
e. 5

A simple example of loop I think about is: 

<div v-for="(group, i) in question_group" :key="'group' + i">
     <div class="col-12">
        <label>{{ group.str }}</label>
     </div>
     <div v-for="(question, y) in questions" :key="'question' + y">
          <label>{{ index }} {{ question.str }}</label>
          <div v-for="(answer, z) in answer_choice" :key="'answer' + z">
               <label>{{ alphabet[index] }}. {{ answer[z] }}</label>
          </div>
     </div>
</div>

Upvotes: 0

Views: 86

Answers (3)

Julien
Julien

Reputation: 2246

When you are iterating over an array using v-for, the second argument is the index of entry.

So you HTML should be :

new Vue({
  el: "#app",
  data: {
    alphabet: ['a', 'b', 'c', 'd', 'e'],
    question_group: [{
        str: "Addition",
        questions: [{
            str: "1+1",
            tipe: "multiple_choice",
            answer_choice: [1, 2, 3, 4, 5]
          },
          {
            str: "2+2",
            tipe: "multiple_choice",
            answer_choice: [1, 2, 3, 4, 5]
          }
        ]
      },
      {
        str: "Subtraction",
        questions: [{
          str: "2-1",
          tipe: "multiple_choice",
          answer_choice: [1, 2, 3, 4, 5]
        }]
      }
    ]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(group, i) in question_group" :key="'group' + i">
    <div class="col-12">
      <label>{{ group.str }}</label>
    </div>
    <div v-for="(question,y) in group.questions" :key="'question' + y">
      <label>{{ y+1 }}. {{ question.str }}</label>
      <div v-for="(answer,z)  in question.answer_choice" :key="'answer' + z">
        <label> {{ alphabet[z] }}.  {{answer}}</label>
      </div>
    </div>
  </div>
</div>

More informations are available in the official documentation.

Upvotes: 2

maassim
maassim

Reputation: 46

this's a way to solve your problem

<div id="app">
  <div v-for="(group, i) in question_group" :key="'group' + i">
    <div class="col-12">
      <label>{{ group.str }}</label>
    </div>
    <div v-for="(question, question_index) in group.questions" :key="'question' + question_index">
      <label>{{ question_index + 1 }} {{ question.str }}</label>
      <ol type='a'>
      <li v-for="(answer, answer_index) in question.answer_choice" :key="'answer' + answer_index">{{ answer }}</li>
      </ol>
    </div>
  </div>
</div>

Upvotes: 0

waiaan
waiaan

Reputation: 220

you mean like this?

<div v-for="(group, i) in question_group" :key="'group' + i">
     <div class="col-12">
        <label>{{ group.str }}</label>
     </div>
     <div v-for="(question, y) in group.questions" :key="'question' + y">
          <label>{{ index }} {{ question.str }}</label>
          <div v-for="(answer, z) in question.answer_choice" :key="'answer' + z">
               <label>{{ alphabet[index] }}. {{ answer[z] }}</label>
          </div>
     </div>
</div>

Upvotes: 2

Related Questions