Vue - Add elements outside of the loop

Question

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>

Wrap the headers inside <thead></thead> and all the rows inside <tbody></tbody> — chans
– chans, Commented Oct 17, 2019 at 17:52
Are you just asking how to create two <tr> elements for each item in the data array? — skirtle
– skirtle, Commented Oct 17, 2019 at 17:56

chans · Accepted Answer · 2019-10-17 17:55:42Z

1

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>

answered Oct 17, 2019 at 17:55

chans

5,26020 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Holiday Over a year ago

Well, your method almost worked. Problem was that it isn't allowed to key a template, but I've but the <tr>'s outisde the template into it and just added a key to each <tr> element and removed the key from the template. Works like a charm now. Thank you so much!

Collectives™ on Stack Overflow

Vue - Add elements outside of the loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related