Vue - Clear true false toggles from out side a loop - vue.js

Question

I am relatively new to Vus.js and vanilla js, Im looking for some help. I have a loop where filters are toggled between false and true depending on the criteria. I have a button outside of all the vue loops that I would like to use to clear all the toggles - set all the data back to false.
I am using axios and a json file for my data. Theere are three filess I am working with filters.json, filters.js and the html
Thanks in advance for you help
json
[{
"name": "Category",
"filterVisible": false,
"buttonActive": false,
"values": [{
"name": "Single Cask",
"selected": false
},
{
"name": "Regional Malt",
"selected": false
},
{
"name": "New releases",
"selected": false
}
]
},
{
"name": "Region",
"filterVisible": false,
"buttonActive": false,
"values": [{
"name": "Highland",
"selected": false
},
{
"name": "Speyside",
"selected": false
},
{
"name": "Islay",
"selected": false
}
]
},
{
"name": "Brand",
"filterVisible": false,
"buttonActive": false,
"values": [{
"name": "Regional Malts",
"selected": false
},
{
"name": "Single Casks",
"selected": false
},
{
"name": "The Big Yin",
"selected": false
},
{
"name": "The Wee Yin",
"selected": false
}
]
},
{
"name": "Price",
"filterVisible": false,
"buttonActive": false,
"values": [{
"name": "£1-50",
"selected": false
},
{
"name": "£51-100",
"selected": false
}
]
}
]
fliters.js
var vm = new Vue({
el: '#app',
data: {
shopFilters: []
},
created() {
axios
.get(`shopFilters.json`)
.then(response => {
// JSON responses are automatically parsed.
this.shopFilters = response.data;
})
},
computed: {
}, // end computed
methods: {
// my attempt at clearing filter
clearAll: function(filter) {
shopFilters.filterVisible = false
}
}
});
html
<div class="shop__filter">
<div class="shop__filter-header">
<h6 class="shop__filter-heading"><img src="img/filter-symbol.png" />Filter</h6>
<p class="shop__filter-showing">showing 1-8 of 120</p>
**this is the bit I want to call the Function on**
<button #click="clearAll()" class="btn btn-white btn-mobile">clear filters</button>
</div>
<form>
<dl class="shop__filter-list">
<template v-for="filter in shopFilters">
<dt class="shop__filter-dt">
<button class="shop__btn-type"
v-on:click="filter.buttonActive = !filter.buttonActive"
:class="{'active' : filter.buttonActive}"
#click="toggle(filter)"
#click.self.prevent>
{{ filter.name }}
</button>
</dt>
<dd class="shop__filter-dd"
v-show="filter.filterVisible || option.selected"
:id="filter.name"
v-for="option in filter.values">
<button class="shop__btn-filter"
#click.self.prevent
v-on:click="option.selected = !option.selected"
:class="{'active' : option.selected}">
{{ option.name }}
</button>
</dd>
</template>
</dl>
</form>
</div>

Answer 1

I got a fix for this
clearAll: function() {
for (var i = 0; i < this.shopFilters.length; i++) {
var filter = this.shopFilters[i];
filter.buttonActive = false;
filter.filterVisible = false;
for (var j = 0; j < filter.values.length; j++) {
var option = filter.values[j];
option.selected = false;
}
}
}, // end clearAll