[英]How to use v-for to render a table using vue.js
我有一個看起來像這樣的數組:
sales = [
[{'Year': 2018, 'Month': 01, 'Sale'; 512}, {'Year': 2018, 'Month': 02, 'Sale'; 1025}, ....],
[{'Year': 2017, 'Month': 01, 'Sale'; 155}, {'Year': 2017, 'Month': 02, 'Sale'; 12}, ....]
]
我想用vue在表中顯示它:
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>2018</th>
<th>2017</th>
</tr>
</thead>
<tbody>
<tr v-for="(sale,i) in sales" :key="i">
<th scope="row">{{ ??? }}</th> //Month
<td>{{ ??? }}</td> //currentYear.Sale
<td>{{ ??? }}</td> //previousYear.Sale
</tr>
</tbody>
</table>
不幸的是,我不知道如何遍歷銷售數組以顯示本年度和上一年的每個表行銷售額。
<div id="app">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>2018</th>
<th>2017</th>
</tr>
</thead>
<tbody>
<tr v-for="(sale,i) in sales[0]" :key="i">
<th scope="row">{{ sale.Month }}</th>
<td>{{ sale.Sale }}</td>
<td>{{ sales[1][i].Sale }}</td>
</tr>
</tbody>
</table>
</div>
new Vue({
el: "#app",
data: {
sales: [
[{'Year': 2018, 'Month': 01, 'Sale': 512}, {'Year': 2018, 'Month': 02, 'Sale': 1025}],
[{'Year': 2017, 'Month': 01, 'Sale': 155}, {'Year': 2017, 'Month': 02, 'Sale': 12}]
]
}
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.