如何在 Vue 开关更改时触发事件答案

【问题标题】：How to fire an event on Vue switch change如何在 Vue 开关更改时触发事件
【发布时间】：2025-12-28 06:35:06
【问题描述】：

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

问题在于，因为我正在“监视”开关，所以 API 调用会在装载时设置数据时运行。因此，如果它设置为 ON 并且您导航到组件，mounted() 方法会将开关设置为 ON，但它也会调用切换 API 方法将其关闭。因此，视图说它是打开的，但数据说它是关闭的。

我尝试更改 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;
    }
  }
}

【问题讨论】：

“我试图改变 API 事件，让它在点击方法上发生，但这不起作用” 你在哪里尝试呢？点击应该可以正常工作。
我把它拿出来是因为它不起作用，但我将切换手表更改为一个方法并将@click="toggleMonitoring()" 添加到开关元素，但该方法在单击时从未运行.

标签： javascript vue.js vue-component

【解决方案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;
      }
    }
  }
}

【讨论】：

【解决方案2】：

创建一个名为 clickToggle 的新计算，而不是 watch。它的get 函数返回toggle，它的set 函数执行您在watch 中所做的事情（以及最终设置toggle）。您的mounted 可以随意调整toggle。只有更改 clickToggle 才能完成其他操作。

【讨论】：