[Vuejs]-Nested v-for with Vuejs

by

2👍

✅

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.

👤Julien

2👍

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>
👤waiaan

0👍

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>
👤maassim

Leave a comment