While looping over a table row, I realized that each of the table rows should be accompanied by another table row containing additional data from the loop. Unfortunately, I am struggling to insert
<tr class="data-spacer"></tr>
<tr>
<td class="additional-data" colspan="3>Subjects: </td>
<td class="additional-data" colspan="5">>Classes: </td>
</tr>
<tr class="spacer"></tr>
after each iteration of the row in the loop. I attempted to separately loop these elements as well, but they ended up being stacked after the last child generated by the first row's loop, causing the attached tr to appear under the last child of the first loop.
Is there any solution for this issue? It is imperative that I use a table structure for this.
<table>
<tr>
<th>Photo</th>
<th>First name</th>
<th>Last name</th>
<th>Username</th>
<th>Email</th>
<th>Phone number</th>
<th>Class</th>
<th>Subjects</th>
<th>Classes</th>
<th>Operation</th>
</tr>
<tr v-for="(teacher, i) in teachers" :key="i">
<td><img id="profilePhoto" src="../../../assets/default_pic/user_green.svg" alt="profile-photo"></td>
<td><input type="text" v-model="teacher.firstName"></td>
<td><input type="text" v-model="teacher.lastName"></td>
<td><input type="text" v-model="teacher.username"></td>
<td><input type="text" v-model="teacher.email"></td>
<td><input type="text" v-model="teacher.phoneNumber"></td>
<td><span>F12</span></td>
<td><span></span></td>
<td><span></span></td>
<td></td>
</tr>
<tr class="data-spacer"></tr>
<tr>
<td class="additional-data" colspan="3">Subjects: </td>
<td class="additional-data" colspan="5">Classes: </td>
</tr>
<tr class="spacer"></tr>
</table>