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

this.$router.push({query: filters});

}

Checking and unchecking the filters on the right should update the URL with the items
checked.

Preselecting filters on page load

When loading a category with filters already in the URL, we need to ensure the checkboxes

are checked on the right-hand side. This can be done by looping through the existing query
parameters and adding any matching keys and arrays to the topics parameter. As the

query can either be an array or a string, we need to ensure the checked property is an array

no matter what. We also need to ensure the query key is, indeed, a filter and not a page

parameter:

filters() {

if(this.categoriesExist) {

let category = this.categoryProducts(this.slug);

for(let product of category.productDetails) {

...

}

Object.keys(this.$route.query).forEach(key => {

if(Object.keys(this.topics).includes(key)) {

let query = this.$route.query[key];

this.topics[key].checked = Array.isArray(query)? query : [query];

}

});

}

return this.topics;

}

On page load, the filters in the URL will be checked.