[Vuejs]-Accessing / reading nested data in html

by

0👍

As the products is an array you need a for loop to iterate over it

    <tr v-for="(order, index) in orders"
                            v-bind:class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{order.id}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{order.deliveryName}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{order.createdAt}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">

<!-- for loop to iterate over it -->
                               <span v-for="(product, index) in order.products">
                                  {{product.price}}
</span>



                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                € 150
                            </td>
                        </tr>

Leave a comment