Javascript 设置表格格式以正确的列和行显示数据

我试图创建一个表格，将用户通过购买票证回答的所有答案放在正确的问题下，如果他们没有回答，则显示破折号符号

问题是，如果用户购买的门票数量超过了，那么答案就会变得一团糟

例如：

因此，该数字应与“Free 2”在同一行中的“Mobile Num”下，而“Male”、“Aadil”和“20”应与“Free”在同一行中的“性别”、“姓名”和“年龄”下

这是我的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>

{{user.first\u name+“”+user.last\u name}
{{nameTick}}
{{ans.answer}}

这是我的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);
            }
        }
    }

beforeMount:function（）{
this.$axios.$get（`/user/${this.userId}`）。然后（response=>{
this.user=响应
});
for（设i=0；i{
for（设i=0；i

如果有人能帮忙，我们将不胜感激。

删除

内的

，然后使用带有网格和css的

在

内进行组织

{{user.first\u name+“”+user.last\u name}
{{nameTick}}
{{ans.answer}}

<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">
                        <div class="ui grid">
                            {{nameTick}}
                        </div>
                    </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>