Our filters are now being created and appended to dynamically, and activating a filter updates the query parameter in the URL. We can now proceed with showing and hiding products based on the URL parameters. We are going to be doing this by filtering the products before being passed into the ListProducts component. This ensures the pagination works correctly.
As we are filtering, open up ListProducts.js and add a :key attribute to each list item, with the value of the handle:
<ol :start="pagination.range.from + 1"> <li v-for="product in paginate(products)" :key="product.handle"> ... </li></ol>
Open up the CategoryPage view and create a method within the methods object titled filtering() and add a return true to begin ...