How to code a nested v-for loop to display all elements?

Question

I am coding an app which makes orders and for each order their are a certain amount of products within them. How would i code my VueJs code below to display all products for each order that comes in? The code below is my VueJS template

<div class="card card-default" v-for="(order, index) in orders">

  <p style="padding:0px;"><strong> User: </strong> {{order.user.name}} </p>
  <table class="table-repsonsive table-bordered ">
    <thead>
      <th scope="col">Product</th>
      <th scope="col">Price</th>
      <th scope="col">Quantity</th>
    </thead>
    <tbody v-for="(product, pindex) in orders">

      --how to loop through each product of each order in the array?

      <td>{{product.order[pindex].name}}</td>
      <td>R{{product.order[pindex].price}}</td>
      <td>{{product.order[pindex].quant}}</td>


    </tbody>


  </table>

</div>

This is the order object that is pushed within the orders array after each order takes place

 {
      "order": [
        {
          "id": 1,
          "name": "Garden",
          "price": 20,
          "quant": 1
        },
        {
          "id": 2,
          "name": "Greek",
          "price": 24,
          "quant": 1
        },
        {
          "id": 3,
          "name": "Chicken mayo",
          "price": 24,
          "quant": 1
        }
      ],
      "user": {
        "id": 1,
        "role_id": 2,
        "name": "Mapia",
        "email": "[email protected]",
        "avatar": "users/default.png",
        "settings": null,
        "created_at": "2018-07-05 13:10:26",
        "updated_at": "2018-07-05 13:10:26"
      }
    }

ArtemSky · Accepted Answer · 2018-10-14 19:33:43Z

1

You should take you order and loop through its property order

<tbody v-for="product in order.order">
    <td>{{product.name}}</td>
    <td>R{{product.price}}</td>
    <td>{{product.quant}}</td>
</tbody>

answered Oct 14, 2018 at 19:33

ArtemSky

1,21312 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to code a nested v-for loop to display all elements?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related