Our filtering component, when interacted with, is going to update the URL query parameters. This allows the user to see the filters in effect, bookmark them, and share the URL if needed. We already used query parameters for our pagination, and it makes sense to put the user back on page one when filtering – as there may only be one page.
To construct our query parameters of filters, we need to loop through each filter type and add a new parameter for each one that has items in the checked array. We can then call a router.push() to update the URL and, in turn, change the products displayed.
Create an empty object in your updateFilters method. Loop through the topics and populate the filters object with the items checked. Set the query parameters in the router to the filters object:
updateFilters() {
let filters = {};
Object.keys...