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

Add an array of checked to each of the topic objects in the data object:

data() {

return {

topics: {

vendor: {

title: 'Manufacturer',

handle: 'vendor',

checked: [],

values: {}

},

tags: {

title: 'Tags',

handle: 'tags',

checked: [],

values: {}

}

}

}

}

Next, add a v-model attribute to each checkbox, referencing this array on the filter

object along with a click binder, referencing an updateFilters method:

<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" v-model="filter.checked"

@click="updateFilters">

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

</label>

</div>

</div>

Create an empty method for now - we'll configure it later:

methods: {

addTopic(category, item) {

...

},

updateFilters() {

}

}