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

Update the template to reflect the changes in the computed data:

template: `<div>

<div v-if="category">

<h1>{{ category.title }}</h1>

<list-products :products="category.productDetails"></list-products>

</div>

<page-not-found v-if="categoryNotFound"></page-not-found>

</div>`,

Building the filtering component based on products

As mentioned, all our filters are going to be created from the products in the current

category. This means if there are no products made by IceToolz, it won't appear as an
available filter.

To begin with, open the ProductFiltering.js component file. Our product filtering is

going to go in our sidebar, so change the component definition from Vue.component to an

object. We still want our categories to display after the filtering, so add the
ListCategories component as a declared component within ProductFiltering. Add a

template key and include the component:

const ProductFiltering = {

name: 'ProductFiltering',

template: `<div>

<list-categories />

</div>`,

components: {

ListCategories

}

}

Update the category route to include the ProductFiltering component in the sidebar

instead of ListCategories:

{

path: '/category/:slug',

name: 'Category',

components: {

default: CategoryPage,