Hey there! I'm a newbie to vue and I've got myself a bunch of json data that includes products categorized by category. Can someone guide me on how to display each product under its respective category?
{
"_id": "62566ec30e42d6c5ab370e7c",
"products": [],
"type": "mobile phone",
"__v": 0
}
Here's a peek at my product array:
{
"_id": "625671db370e769a8a93a510",
"reviews": [],
"owner": {
"_id": "6220db7ee861f3dbbaf21e3d",
"name": "mr jacob",
"about": "hello",
"__v": 0
},
"category": {
"_id": "62566ec30e42d6c5ab370e7c",
"products": [],
"type": "mobile phone",
"__v": 0
},
"title": "galaxy s21",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ullam iusto culpa assumenda enim ea, asperiores omnis, facere quos animi doloremque, architecto facilis aut? Nobis ab sit iusto praesentium quia.",
"photo": "https://ajibade.s3.amazonaws.com/1649832365317",
"price": 500,
"stockQuantity": 1,
"__v": 0,
"id": "625671db370e769a8a93a510"
}
Now let's check out my html template responsible for listing categories from the database:
<div class="container" v-for="category in categories" :value="category._id" :key="category._id">
<span>{{category.type}}</span>
</div>
Check out my script tag too:
<script>
export default {
name: "Products",
name: "categories",
data() {
return {
categoryID: null,
categories: [],
products: [],
};
},
mounted() {
axios.get("http://localhost:5000/api/products").then(res => {
console.log(res);
this.products = res.data.products;
});
axios.get("http://localhost:5000/api/categories").then(res => {
console.log(res);
this.categories = res.data.categories;
});
}
};
</script>
I'd really appreciate some pointers on filtering these products by category. Feeling a bit lost here!