多个按钮点击的 Vue Watchers

Question

我有多个设置为 false 的过滤器，如果单击变为 true，则必须实现特定的过滤器。 我如何使用观察者来寻找我的过滤器从假到真的变化。 目前，如果单击一个过滤器，我将所有功能都放在一个观察者中，所有过滤器都已实现。 而我只需要它是与过滤器按钮相关的特定过滤器。

<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

Answer 1

使用点分隔路径作为观察者键。

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

Answer 2

Vue $watch提供回调 function 两个参数(newValue, oldValue) ，因此如果每个过滤器操作为true ，您可以检查每个过滤器的新值

watch: {
    filters: {
      handler: function({statusString1, statusString2, statusString3}){
        if (statusString1)
           this.filterString1()
        if (statusString2)
           this.filterString2()
        if (statusString3)
           this.filterString3()
      },
      deep: true
    }
}