Javascript 如何在Vue交换机更改时触发事件

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

问题是，因为我正在“监视”交换机，所以在挂载数据时，API调用会运行。因此，如果它设置为ON，并且您导航到该组件，mounted（）方法会将开关设置为ON，但它也会调用toggle API方法将其关闭。因此，视图显示为打开，但数据显示为关闭

---

我试图更改API事件，使其发生在click方法上，但这不起作用，因为它无法识别click，并且函数从未运行

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

HTML

---

不要使用

手表

，而是创建一个名为

的新计算机，单击切换

。它的

get

函数返回

toggle

，它的

set

函数执行您在

手表中执行的操作（以及最终设置
toggle
）。您的
挂载
可以调整
切换
，而不受惩罚。只有对
clickToggle
的更改才会执行其他操作。
创建一个名为
clickToggle
的新计算程序，而不是使用
手表。它的
get
函数返回
toggle
，它的
set
函数执行您在
手表中执行的操作（以及最终设置
toggle
）。您的
挂载
可以调整
切换
，而不受惩罚。只有对
单击切换的更改才能执行其他操作。
我建议为您的模型（Vue 2）使用双向计算属性。
尝试在此处更新代码，但在没有Vuex设置的情况下未测试OBV。
有关参考资料，请参阅

我建议为您的模型（Vue 2）使用双向计算属性。
尝试在此处更新代码，但在没有Vuex设置的情况下未测试OBV。
有关参考资料，请参阅

“我试图更改API事件，使其发生在单击方法上，但这不起作用”您的尝试在哪里？单击应该可以正常工作。我取出了它，因为它不工作，但我将toggle watch更改为一个方法，并将@Click=“toggleMonitoring（）”添加到switch元素中，但该方法在单击时从未运行过。“我已尝试更改API事件，使其发生在单击方法上，但这不起作用”您的尝试在哪里？Click应该可以正常工作。我取出了它，因为它不工作，但我将toggle watch更改为一个方法，并将@Click=“toggleMonitoring（）”添加到switch元素中，但该方法在单击时从未运行。
<switcher size="lg" color="green" open-name="ON" close-name="OFF" v-model="toggle"></switcher>  

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

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