javascript - 如何在 Vue 开关更改时触发事件

Question

我有一个带有 vue-switch 元素的 Vue 组件。加载组件时，必须根据数据将开关设置为 ON 或 OFF。目前这发生在“mounted()”方法中。然后，当切换开关时，它需要进行 API 调用来告知数据库新状态。这目前发生在“watch”方法中。

问题是，因为我正在“观察”开关，所以当数据在挂载上设置时，API 调用就会运行。因此，如果它设置为 ON 并且您导航到组件，mounted() 方法会将开关设置为 ON，但它还会调用切换 API 方法将其关闭。因此， View 显示它已打开，但数据显示它已关闭。

我尝试更改 API 事件，以便它发生在单击方法上，但这不起作用，因为它无法识别单击并且该函数永远不会运行。

如何才能使 API 调用仅在单击开关时进行？

HTML

<switcher size="lg" color="green" open-name="ON" close-name="OFF" v-model="toggle"></switcher>  

VUE

data: function() {
    return {
        toggle: false,
        noAvailalableMonitoring: false
    }
},
computed: {
    report() { return this.$store.getters.currentReport },
    isBeingMonitored() { return this.$store.getters.isBeingMonitored },
    availableMonitoring() { return this.$store.getters.checkAvailableMonitoring }
},
mounted() {
    this.toggle = this.isBeingMonitored;
},
watch: {
    toggle: function() {
      if(this.availableMonitoring) {
          let dto = {
            reportToken: this.report.reportToken,
            version: this.report.version
          }
          this.$store.dispatch('TOGGLE_MONITORING', dto).then(response => {
          }, error => {
          console.log("Failed.")
      }) 
    } else {
        this.toggle = false;
        this.noAvailalableMonitoring = true;
    }
  }
}

Answer 1

我建议您的模型使用 2 路计算属性 (Vue 2)。 尝试在此处更新代码，但在没有 Vuex 设置的情况下未对 obvs 进行测试。 引用请见Two-Way Computed Property

data: function(){
  return {
    noAvailableMonitoring: false
  }
},
computed: {
  report() { return this.$store.getters.currentReport },
  isBeingMonitored() { return this.$store.getters.isBeingMonitored },
  availableMonitoring() { return this.$store.getters.checkAvailableMonitoring },
  toggle: {
    get() {
      return this.$store.getters.getToggle;
    },
    set() {
      if(this.availableMonitoring) {
        let dto = {
          reportToken: this.report.reportToken,
          version: this.report.version
        }
        this.$store.dispatch('TOGGLE_MONITORING', dto).then(response => {
        }, error => {
          console.log("Failed.")
        });
      } else {
        this.$store.commit('setToggle', false);
        this.noAvailableMonitoring = true;
      }
    }
  }
}