javascript - 有没有办法让 v-if 在 v-for 中工作来动态渲染模板来创建子表？

Question

我正在尝试创建一个动态表，该表将具有子表来显示属于主项目的值。 表格应该是这样的:

http://prntscr.com/q2slsw

我正在尝试的代码是这样的:

<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 block 在 v-for 中不起作用。我也尝试过V-show。 谢谢。

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