O'Reilly logo

Vue.js 2.x by Example by Mike Street

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 <list-categories> component:

const ProductFiltering = {  name: 'ProductFiltering',  template: `<div>    <list-categories />  </div>`,  components: { ListCategories ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required