After spending countless hours researching, I am determined to solve this problem. My objective is to create a questionnaire similar to a Google Form, with question groups, questions, and answers.
The structure of my data looks like this:
question_group: [ { str : "Addition",
questions: [{ str: "1+1",
type: "multiple_choice",
answer_choices: [1, 2, 3, 4, 5]
},
{ str: "2+2",
type: "multiple_choice",
answer_choices: [1, 2, 3, 4, 5]
}
]
},
{ str : "Subtraction",
questions: [{ str: "2-1",
type: "multiple_choice",
answer_choices: [1, 2, 3, 4, 5]
}
]
}
]
Desired 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
I am considering using the following loop for display:
<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_choices" :key="'answer' + z">
<label>{{ alphabet[index] }}. {{ answer[z] }}</label>
</div>
</div>
</div>