Как кодировать вложенный цикл v-for для отображения всех элементов? - PullRequest
Новая
       11

Как кодировать вложенный цикл v-for для отображения всех элементов?

0 голосов
/ 14 октября 2018

Я кодирую приложение, которое делает заказы, и для каждого заказа в них есть определенное количество продуктов.Как бы я кодировал свой код 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"
      }
    }

1 Ответ

0 голосов
/ 14 октября 2018

Вы должны взять вас order и просмотреть его свойство order

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