Building an E-Commerce Store - Browsing Products Chapter 10}
},
methods: {
toPage(page) {
this.$router.push({
query: Object.assign({}, this.$route.query, {
page
})
});this.currentPage = page;
},paginate(list) {
return list.slice(this.pagination.range.from,
this.pagination.range.to)
}
}
});You can verify your conditional rendering tags are working by temporarily truncating the
products array in the HomePage template – don't forget to remove it once you're done:
products() {
let products = this.$store.state.products;
return Object.keys(products).map(key => products[key]).slice(1, 10);
}Creating a curated list for the home page
With our product listing component in place, we can proceed with making a curated list of
products for our home page, and add more information to the product listing.
In this example, we are going to hardcode an array of product handles on our home page
component that we want to display. If this were in development, you would expect this list
to be controlled via a content management system or similar.