I am currently working on a project that involves creating a table to display user answers for purchased tickets under the corresponding questions. If a question has not been answered, I want to show a dash symbol instead.
However, I am encountering an issue where the answers are getting mixed up when there is more than one ticket purchased by the user.
For instance, in the example image https://i.sstatic.net/RBujM.png, the numbers should align under 'Mobile Num?' in the same row as 'Free 2', while 'Male' and 'Aadil' with '20' should be under 'Gender?', 'Name?', and 'Age?' respectively in the same row as 'Free'.
Below is a snippet of my HTML:
<template>
<fragment>
<tr>
<td :rowspan="countArray + 1">
<img :src="user.profile_image">
</td>
<td :rowspan="countArray + 1">
{{user.first_name + " " + user.last_name}}
</td>
<td :rowspan="countArray + 1">
<div v-for="(nameTick, nameKey) in name" :key="nameKey" class="tdStyle">
<td>
{{nameTick}}
</td>
</div>
</td>
</tr>
<tr v-for="(ticketQues, quesKey) in ticketAns" :key="quesKey">
<td v-for="(ans, ansKey) in ticketQues.questions" :key="ansKey">
{{ans.answer}}
</td>
</tr>
</fragment>
</template>
And here is a snippet of my JS:
beforeMount: function() {
this.$axios.$get(`/user/${this.userId}`).then(response => {
this.user = response
});
for (let i = 0; i < this.ticketName.tickets.length; i++) {
this.tickets_name = this.ticketName.tickets[i].ticket_name;
this.countArray = this.ticketName.tickets[i].count;
this.name.push(this.tickets_name);
};
},
watch: {
tickets: {
handler: function(val) {
for (let x = 0; x < val.length; x++) {
this.$axios.$get(`/ticket/${val[x].id}/answer`).then(response => {
for (let i = 0; i < response.questions.length; i++) {
this.userAnswered = response.questions[i];
this.answered.push(this.userAnswered.answer);
}
console.log(response)
this.allQuestions = this.ticketAns.push(response);
})
}
// this.userAnswers.push(this.ticketAns);
this.userAnswers.push(this.answered);
}
}
}
Any assistance on resolving this issue would be highly appreciated. Thank you!