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": "mapia@gmail.com",
        "avatar": "users/default.png",
        "settings": null,
        "created_at": "2018-07-05 13:10:26",
        "updated_at": "2018-07-05 13:10:26"
      }
    }

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