Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Building an E-Commerce Store - Browsing Products Chapter 10

Back to our ListCategories component; loop through the stored categories and create a

link for each one. Show the product count in brackets after each name:

const ListCategories = {

name: 'ListCategories',

template: `<div v-if="categories">

<ul>

<li v-for="category in categories">

<router-link :to="{name: 'Category', params: {slug:

category.handle}}">

{{ category.title }} ({{ category.products.length }})

</router-link>

</li>

</ul>

</div>`,

computed: {

categories() {

return this.$store.state.categories;

}

}

};

With the links to our categories now showing on the home page, we can head on to make a

category page.

Displaying products in a category

Clicking one of the category links (that is, /#/category/grips) will navigate to a blank

page – thanks to our route. We need to create a template and set up the category page to

show the products. As a starting base, create the CategoryPage component in a similar

vein to the product page.

Create a template with an empty container and the PageNotFound component inside.

Create a data variable titled categoryNotFound, and ensure the PageNotFound

component displays if this is set to true. Create a props object, which allows the slug

property to be passed and, lastly, create a category computed function.

The CategoryPage component should look like the following:

const CategoryPage = {

name: 'CategoryPage',