CODEWITHSUNDEEP
javascriptvue.js
Holiday
Holiday

Reputation: 901

Vue - Add elements outside of the loop

I am looping over a table row, but each of the table rows should have another table row attached to it in which other data from the loop should appear. I am unable to somehow 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 looped row. I tried also just looping those elements for themselves as well, but they just get stacked after the first row's loop has produced all it's children, so the attached tr just gets stacked under the last one of the first loop's children.

Is there any way to overcome this? I really need to use a table 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>

Upvotes: 2

Views: 207

Answers (1)

chans
chans

Reputation: 5260

Added fixes to the above code. Try this one

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

Upvotes: 1

Related Questions