我正在尝试创建一个动态表,该表将具有子表以显示属于主项的值。 表应该是这样的:
我正在尝试的代码也是如此:
<div v-for="item in detailList" class="item--detailed">
<table>
<thead>
<tr>
<th>
Date
</th>
<th>
{{item.creationDate}}
</th>
</tr>
<tr>
<th></th>
<th>
Payment Methods
</th>
<th>
Count
</th>
</tr>
</thead>
<tbody>
<template v-for="jsonItem in item.jsonData.paymentMethods">
<tr>
<td></td>
<td>
{{jsonItem.ID}}
</td>
<td>
{{jsonItem.orderCount}}
</td>
</tr>
<tr v-if="jsonItem.orderCount > 0">
<table>
<thead>
<th>Order ID</th>
<th>Creation Date</th>
<th>Status</th>
</thead>
<tbody>
<tr v-for="orderItem in jsonItem.orders">
<td>{{orderItem.orderId}}</td>
<td>{{orderItem.creationDate}}</td>
<td>{{orderItem.status}}</td>
</tr>
</tbody>
</table>
</tr>
<tr v-else>
There is no order created.
</tr>
</template>
</tbody>
</table>
</div>
v-if =“ jsonItem.orderCount> 0”和v-else块的条件在v-for中不起作用。我也尝试过v-show。 谢谢。
答案 0 :(得分:1)
如果可能,请尝试使用此代码。
<div v-for="item in detailList" class="item--detailed">
<table>
<thead>
<tr>
<th>
Date
</th>
<th>
{{item.creationDate}}
</th>
</tr>
<tr>
<th></th>
<th>
Payment Methods
</th>
<th>
Count
</th>
</tr>
</thead>
<tbody>
<tr v-for="jsonItem in item.jsonData.paymentMethods">
<td></td>
<td>
{{jsonItem.ID}}
</td>
<td>
{{jsonItem.orderCount}}
</td>
<td>
<template v-if="jsonItem.orderCount > 0">
<table>
<thead>
<th>Order ID</th>
<th>Creation Date</th>
<th>Status</th>
</thead>
<tbody>
<tr v-for="orderItem in jsonItem.orders">
<td>{{orderItem.orderId}}</td>
<td>{{orderItem.creationDate}}</td>
<td>{{orderItem.status}}</td>
</tr>
</tbody>
</table>
</template>
<template v-else>
There is no order created.
</template>
</td>
</tr>
</tbody>
</table>