javascript — Vue — добавить элементы вне цикла

Vue — добавить элементы вне цикла

Я зацикливаюсь на строке таблицы, но к каждой из строк таблицы должна быть прикреплена другая строка таблицы, в которой должны появиться другие данные из цикла. Я не могу как-то вставить

  {amp}lt;tr class="data-spacer"{amp}gt;{amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td class="additional-data" colspan="3"{amp}gt;Subjects: {amp}lt;/td{amp}gt; {amp}lt;td class="additional-data" colspan="5"{amp}gt;Classes: {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr class="spacer"{amp}gt;{amp}lt;/tr{amp}gt; 

после каждого зацикленного ряда. Я попытался также просто зациклить эти элементы для себя, но они просто складываются после того, как цикл первого ряда генерирует все его дочерние элементы, поэтому присоединенный tr просто складывается под последним дочерним элементом первого цикла.

Есть ли способ преодолеть это? Мне действительно нужно использовать таблицу для этого.

 {amp}lt;table{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Photo{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;First name{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Last name{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Username{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Email{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Phone number{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Class{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Subjects{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Classes{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Operation{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr v-for="(teacher, i) in teachers" :key="i"{amp}gt; {amp}lt;td{amp}gt;{amp}lt;img id="profilePhoto" src="../../../assets/default_pic/user_green.svg" alt="profile-photo"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="text" v-model="teacher.firstName"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="text" v-model="teacher.lastName"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="text" v-model="teacher.username"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="text" v-model="teacher.email"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="text" v-model="teacher.phoneNumber"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;span{amp}gt;F12{amp}lt;/span{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;span{amp}gt;{amp}lt;/span{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;span{amp}gt;{amp}lt;/span{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr class="data-spacer"{amp}gt;{amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td class="additional-data" colspan="3"{amp}gt;Subjects: {amp}lt;/td{amp}gt; {amp}lt;td class="additional-data" colspan="5"{amp}gt;Classes: {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr class="spacer"{amp}gt;{amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; - {amp}lt;table{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Photo{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;First name{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Last name{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Username{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Email{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Phone number{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Class{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Subjects{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Classes{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Operation{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr v-for="(teacher, i) in teachers" :key="i"{amp}gt; {amp}lt;td{amp}gt;{amp}lt;img id="profilePhoto" src="../../../assets/default_pic/user_green.svg" alt="profile-photo"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="text" v-model="teacher.firstName"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="text" v-model="teacher.lastName"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="text" v-model="teacher.username"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="text" v-model="teacher.email"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="text" v-model="teacher.phoneNumber"{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;span{amp}gt;F12{amp}lt;/span{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;span{amp}gt;{amp}lt;/span{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;span{amp}gt;{amp}lt;/span{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr class="data-spacer"{amp}gt;{amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td class="additional-data" colspan="3"{amp}gt;Subjects: {amp}lt;/td{amp}gt; {amp}lt;td class="additional-data" colspan="5"{amp}gt;Classes: {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr class="spacer"{amp}gt;{amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector