Multiple <td> elements per v-for loop
Assuming the teachers and students arrays are always going to be the same length, you can iterate over a template
tag.
<tr v-for="school in schools"> <th>{{ school.name }}</th> <template v-for="(cnt, idx) in school.teachers.length"> <td>{{ school.teachers[idx] }}</td> <td>{{ school.students[idx] }}</td> </template></tr>
Example.
new Vue({ el: '#app', data: { schools: [ { name: 'Lincoln', teachers: [2, 2, 2], students: [40, 40, 40] }, { name: 'Oak Grove', teachers: [2, 2, 2], students: [40, 40, 40] }, { name: 'Fairview', teachers: [2, 2, 2], students: [40, 40, 40] }, ], },});
thead th,tbody td { text-align: center; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script><table id="app" class="table"> <thead> <tr> <th rowspan="2"></th> <th colspan="2">Grade K</th> <th colspan="2">Grade 1</th> <th colspan="2">Grade 2</th> </tr> <tr> <th>Teachers</th> <th>Students</th> <th>Teachers</th> <th>Students</th> <th>Teachers</th> <th>Students</th> </tr> </thead> <tbody> <tr v-for="school in schools"> <th>{{ school.name }}</th> <template v-for="(cnt, idx) in school.teachers.length"> <td>{{ school.teachers[idx] }}</td> <td>{{ school.students[idx] }}</td> </template> </tr> </tbody></table>
Another way to do this is to abstract the repeated elements into a component and use the special is
attribute (<td is="details" v-for="..."></td>
).