多個​​元素每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>）。