Multiple <td> elements per v-for loop Multiple <td> elements per v-for loop vue.js vue.js

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>