I have multiple filters that are set to false and if clicked turn to true and must implement the specific filter. How can I use a watchers to look for the changing of my filter from false to true. Currently as I have all my functions in one watcher if one filter is clicked all filters are implemented. Whereas I need it to be only the specific filter that is related to the filter button.
<sankey-filter
label="string1"
v-model="filters.string1"
/>
<sankey-filter
label="string2"
v-model="filters.string2"
/>
<sankey-filter
label="string3"
v-model="filters.string3"
/>
data() {
return {
filters: {
statusString1: false,
statusString2: false,
statusString3: false,
}
watch: {
filters: {
handler: function(){
this.filterString1(),
this.filterString2(),
this.filterString2(),
},
deep: true
Use a dot-delimited path as the watcher key.
watch: {
'filters.string1' () {
this.filterString1(),
},
'filters.string2' () {
this.filterString2(),
},
'filters.string3' () {
this.filterString3(),
},
}
Vue $watch provide callback function two parameters (newValue, oldValue) so U can check new value each filter if true for each filter action
watch: {
filters: {
handler: function({statusString1, statusString2, statusString3}){
if (statusString1)
this.filterString1()
if (statusString2)
this.filterString2()
if (statusString3)
this.filterString3()
},
deep: true
}
}