Vue Watchers for multiple button clicks-CodePudding

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

CodePudding user response：

Use a dot-delimited path as the watcher key.

watch: {
    'filters.string1' () {
       this.filterString1(),
     },
    'filters.string2' () {
       this.filterString2(),
     },
    'filters.string3' () {
       this.filterString3(),
     },
}

CodePudding user response：

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
    }
}