title: Format table to show data in correct columns and rows
body: <p>I am trying to create a table that places all the answers that the user has answered by buying a ticket under the correct questions, and if they haven't answered then show the dash symbol.</p>
  
  <p>The problem is that if there are more than on tickets that the user has purchased then the answers get all messed up.</p>
  
  <p>Example: </p>
  
  <p><a href="https://i.stack.imgur.com/RBujM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RBujM.png" alt="enter image description here"></a></p>
  
  <p>So, for this the number should go under 'Mobile Num?' in the same row as 'Free 2' and 'Male', 'Aadil' and '20' should go under 'Gender?', 'Name?' and 'Age?' in the same row as Free.</p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;template&gt;
      &lt;fragment&gt;
          &lt;tr&gt;
              &lt;td :rowspan="countArray + 1"&gt;
                  &lt;img :src="user.profile_image"&gt;
              &lt;/td&gt;
  
              &lt;td :rowspan="countArray + 1"&gt;
                  {{user.first_name + " " + user.last_name}}
              &lt;/td&gt;
  
              &lt;td :rowspan="countArray + 1"&gt;
                  &lt;div v-for="(nameTick, nameKey) in name" :key="nameKey" class="tdStyle"&gt;
                      &lt;td&gt;
                          {{nameTick}}
                      &lt;/td&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr v-for="(ticketQues, quesKey) in ticketAns" :key="quesKey"&gt;
              &lt;td v-for="(ans, ansKey) in ticketQues.questions" :key="ansKey"&gt;
                  {{ans.answer}}
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/fragment&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>This is my JS:</p>
  
  <pre><code>beforeMount: function() {
          this.$axios.$get(`/user/${this.userId}`).then(response =&gt; {
              this.user = response
          });
  
          for (let i = 0; i &lt; 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 &lt; val.length; x++) {
                      this.$axios.$get(`/ticket/${val[x].id}/answer`).then(response =&gt; {
  
                          for (let i = 0; i &lt; 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);
              }
          }
      }
  </code></pre>
  
  <p>If someone can help it would be much appreciated.</p>