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

for(let tag of product.tags) {

this.addTopic(this.topics.tags, tag, product.handle);

}

}

}

}

}

At the end of this function, return this.topics. Although we could reference topics

directly in the template, we need to ensure the filters computed property gets triggered:

filters() {

if(this.categoriesExist) {

...

}

return this.topics;

}

Before we proceed to create our dynamic filters based on the various types, let's display the
current filters.

Due to how the topics object is set up, we can loop through each of the child objects and

then through the values of each one. We are going to make our filters out of checkboxes,

with the value of the input being the handle of each of the filters:

template: `<div>

<div class="filters">

<div class="filterGroup" v-for="filter in filters">

<h3>{{ filter.title }}</h3>

<label class="filter" v-for="value in filter.values">

<input type="checkbox" :value="value.handle">

{{ value.title }} ({{ value.count }})

</label>

</div>

</div>

<list-categories />

</div>`,

In order to keep track of what is checked, we can use a v-model attribute. If there are

checkboxes with the same v-model, Vue creates an array with each item.