javascript - Vue - 在循环外添加元素

Question

我在一个表行上循环，但是每个表行都应该有另一个表行附加到它上面，循环中的其他数据应该出现在其中。我无法以某种方式插入

  <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>

在每个循环行之后。我也尝试过只为自己循环这些元素，但它们只是在第一行的循环产生所有它的子元素后才堆叠起来，所以附加的 tr 只是堆叠在第一个循环的最后一个子元素下面。

有什么办法可以克服这个问题吗？我真的需要为此使用表格。

<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>

Answer 1

为上述代码添加了修复。试试这个

<table>
<thead>
          <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>
</thead>
<tbody>
<template v-for="(teacher, i) in teachers" :key="i">
          <tr>
            <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>
</template>
          <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>
</tbody>
</table>