Is there a way to make v-if work in v-for to render a template dynamically to create sub-table?

I am trying to create a dynamic table which will have sub table to display values belong to main item.
Table should be like this:

http://prntscr.com/q2slsw

Also the code I am trying is like this:

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

The condition for v-if=”jsonItem.orderCount > 0″ and v-else block are not working in v-for. I have also tried v-show.
Thanks.

1 Answer

If possible try this code.

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

Archive from: https://stackoverflow.com/questions/59070331/is-there-a-way-to-make-v-if-work-in-v-for-to-render-a-template-dynamically-to-cr

Leave a Reply

Your email address will not be published. Required fields are marked *