如何在Vue开关更改时触发事件 [英] How to fire an event on Vue switch change

问题描述

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

I have a Vue component that has a vue-switch element. When the component is loaded, the switch has to be set to ON or OFF depending on the data. This is currently happening within the 'mounted()' method. Then, when the switch is toggled, it needs to make an API call that will tell the database the new state. This is currently happening in the 'watch' method.

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

The problem is that because I am 'watching' the switch, the API call runs when the data gets set on mount. So if it's set to ON and you navigate to the component, the mounted() method sets the switch to ON but it ALSO calls the toggle API method which turns it off. Therefore the view says it's on but the data says it's off.

我试图更改API事件，以便它在点击方法上发生，但这不是因为它无法识别点击而且该功能永远不会运行。

I have tried to change the API event so that it happens on a click method, but this doesn't work as it doesn't recognize a click and the function never runs.

如何进行API调用以便仅在单击开关时进行API调用？

How do I make it so that the API call is only made when the switch is clicked?

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

推荐答案

我建议为您的模型使用双向计算属性（Vue 2）。
此处尝试更新代码，但未经过Vuex设置后未进行测试。
如需参考，请参阅双向计算属性

I would recommend using a 2-way computed property for your model (Vue 2). Attempted to update code here, but obvs not tested without your Vuex setup. For reference, please see 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;
      }
    }
  }
}

这篇关于如何在Vue开关更改时触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！