Question

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

问题在于，因为我正在“观察”切换，所以当数据在mount上设置时，API调用会运行。因此，如果它设置为ON并导航到组件，则mounted（）方法将开关设置为ON，但它也调用切换API方法将其关闭。因此，该视图显示它已开启，但数据显示它已关闭。

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

如何进行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

我建议为你的模型使用双向计算属性（Vue 2）。尝试在此更新代码，但是没有在没有Vuex设置的情况下未进行测试。有关参考，请参阅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;
      }
    }
  }
}

Answer 2

创建一个名为watch的新计算机，而不是clickToggle。其get函数返回toggle，其set函数执行您在watch中执行的操作（以及最终设置toggle）。您的mounted可以调整toggle而不受惩罚。只有对clickToggle的更改才会执行其他操作。

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

2 个答案: