如何编写嵌套的 v-for 循环以显示所有元素？

Question

我正在编写一个下订单的应用程序，每个订单中都有一定数量的产品。我将如何编写下面的 VueJs 代码以显示收到的每个订单的所有产品？下面的代码是我的 VueJS 模板

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

这是在每个订单发生后推送到订单数组中的订单对象

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

你应该 order 并循环遍历其属性 order

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

如何编写嵌套的 v-for 循环以显示所有元素？

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

javascript

arrays

vue.js

bootstrap-4

v-for