多个​​元素每v- for循环

Question

在我的Vue应用程序中，我通过一系列学校循环。每所学校都有一个名字，一系列教师数量（每个年级一个）和一系列学生数量（每个年级一个）。

以下代码有效，但只是因为我手动编码了<td>。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    schools: [ 
 
     { name: 'Lincoln', teachers: [3, 4, 1], students: [55, 42, 39] }, 
 
     { name: 'Oak Grove', teachers: [1, 2, 1], students: [31, 36, 23] }, 
 
     { name: 'Fairview', teachers: [1, 3, 2], students: [30, 26, 39] }, 
 
    ], 
 
    }, 
 
});

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> 
 
     
 
     <td>{{ school.teachers[0] }}</td> 
 
     <td>{{ school.students[0] }}</td> 
 
     
 
     <td>{{ school.teachers[1] }}</td> 
 
     <td>{{ school.students[1] }}</td> 
 
     
 
     <td>{{ school.teachers[2] }}</td> 
 
     <td>{{ school.students[2] }}</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

通知重复行：

<td>{{ school.teachers[x] }}</td> 
<td>{{ school.students[x] }}</td> 

这不是太上该简化示例中的一个问题。但在我的真实项目中，还有更多的列和子列。 有没有办法做一个重复循环来显示<td>？

我试过另一种v型的循环，但因为它是<tr>里面，只有<td>和<th>是允许的。

Answer 1

假设教师和学生阵列为总是长度相同，您可以遍历template标记。

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

例子。

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>

另一种方式来做到这一点是抽象的重复的元素到一个组件，并使用special is attribute（<td is="details" v-for="..."></td>）。