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>