How to get list of products in a particular category in vue

user_19320211 0
Viewed 90

I have a list of products under a categoryID, how can I get the display the product under each categoryID

This is my category id data :

{
    "success": true,
    "category": {
        "_id": "62566ec30e42d6c5ab370e7c",
        "products": [],
        "type": "mobile phone",
        "__v": 0
    }
}

This is the product data with categoryID :

{
    "_id": "62567252370e769a8a93a517",
    "category": {
        "_id": "62566ec30e42d6c5ab370e7c",
        "products": [],
        "type": "mobile phone",
        "__v": 0
    },
    "title": "galaxy s10",
}

this my html template to display my data

 <div>
    <div id="app">
      <p>{{category.type}}</p>
      <ul>
        <li
          v-for="product in products"
          :key="product._id"
        >
          {{ product.title }}
        </li>
      </ul>
    </div>
  </div>

I get the {{ category.type }}, but when looping through the product I get all the products from my database instead of the products in a particular categoryID

How can I display the list of product under {{ category.type }} each time I go to the categoryID route.

vuejs2 vue.js
1 Answers

Try this :

new Vue({
  el: '#app',
  data: {
    category: {
      "_id": "62566ec30e42d6c5ab370e7c",
      "products": [],
      "type": "mobile phone",
      "__v": 0
    },
    products: [{
      "_id": "62567252370e769a8a93a517",
      "category": {
        "_id": "62566ec30e42d6c5ab370e7c",
        "products": [],
        "type": "mobile phone",
        "__v": 0
      },
      "title": "galaxy s10"
    }, {
      "_id": "62567252370e769a8a93a517",
      "category": {
        "_id": "62566ec30e42d6c5ab370e7c",
        "products": [],
        "type": "mobile phone",
        "__v": 0
      },
      "title": "One Plus"
    }]
  },
  mounted() {
    const catID = category._id;
    this.products = this.products.filter(({ category }) => catID === category._id);
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p>{{category.type}}</p>
  <ul>
    <li v-for="product in products" :key="product._id">
      {{ product.title }}
    </li>
  </ul>
</div>

user_41163000
Related