मैं एक ऐप को कोड कर रहा हूं जो ऑर्डर करता है और प्रत्येक ऑर्डर के लिए उनके भीतर एक निश्चित मात्रा में उत्पाद होते हैं। मैं आने वाले प्रत्येक ऑर्डर के लिए सभी उत्पादों को प्रदर्शित करने के लिए नीचे अपना 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"
      }
    }
0
Matipa Modisane 14 अक्टूबर 2018, 22:28

1 उत्तर

सबसे बढ़िया उत्तर

आपको आपको order ले जाना चाहिए और इसकी संपत्ति order के माध्यम से लूप करना चाहिए

<tbody v-for="product in order.order">
    <td>{{product.name}}</td>
    <td>R{{product.price}}</td>
    <td>{{product.quant}}</td>
</tbody>
1
ArtemSky 14 अक्टूबर 2018, 19:33