I want to display items of each category.
For this I have a parent component that passes the category to the child component and it filters out the items based on that category and shows it for each of the categories. The child component loops through the items in that category.
The item array contains items of all category. I cant quite get the idea on how to do this and which lifecycle hooks I should use.
If anyone would take a look that would be appreciated.
The Parent Component:
<template>
<div>
<home-categories v-for="category in storeCategories" :key="category.name" :category="category.name"></home-categories>
</div>
</template>
<script>
import HomeCategories from "@/components/home/HomeCategories";
export default {
name: "HomeCategoryParent",
components: {
HomeCategories
},
created() {
this.$store.dispatch("bindStoreCategories")
},
computed: {
storeCategories() {
return this.$store.getters.storeCategories;
}
}
}
</script>
<style scoped>
</style>
The Child Component:
<template>
<v-container fluid style="margin-top: -20px;" class="google-font">
<p
class="google-font mt-0 mb-0"
style="font-weight: 200; font-size: 120%; padding: 0px;"
>
<b>{{ category }}</b>
</p>
<v-card
class="d-flex flex-row disableScroll"
flat
tile
style="margin-top: 16px; padding: 2px; overflow-x: auto;"
>
<v-card max-width="250" v-for="item in items" :key="item.name">
<v-img
class="white--text align-end"
height="200px"
src="../../assets/img/category_blank.jpg"
>
<v-card-title>{{ item.ITEM_NAME }}</v-card-title>
</v-img>
<v-card-subtitle class="pb-0">{{item.price}}</v-card-subtitle>
<v-card-text class="text--primary">
<div>{{item.desc}}</div>
<div>{{item.unit}}</div>
</v-card-text>
<v-card-actions>
<v-btn color="orange" text>
Add
</v-btn>
</v-card-actions>
</v-card>
</v-card>
</v-container>
</template>
<script>
export default {
data() {
return {
items: []
}
},
name: "HomeCategories",
props: ["category"],
created() {
this.$store.dispatch("bindStoreItems");
let all_items = this.$store.getters.storeItems;
this.items = this.$store.getters.storeItems;
all_items.forEach(item => {
let itemObj = {
category: null,
name: null,
desc: null,
price: null,
unit: null,
isAvail: null,
}
if(item.CATEGORY === this.category){
itemObj.category = item.CATEGORY;
itemObj.name = item.ITEM_NAME;
itemObj.desc = item.ITEM_DESC;
itemObj.price = item.ITEM_PRICE;
itemObj.unit =item.ITEM_UNIT;
itemObj.isAvail =item.ITEM_AVAIL;
this.items.push(itemObj);
}
})
},
};
</script>
<style scoped></style>