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

2022-01-25 00:00:00 javascript vue.js vue-component

我有一个带有 vue-switch 元素的 Vue 组件.加载组件时，必须根据数据将开关设置为 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.

问题在于，因为我正在监视"开关，所以 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 调用?

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)使用 2-way 计算属性.尝试在此处更新代码，但在没有您的 Vuex 设置的情况下未测试 obvs.参考请看双向计算属性

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

相关文章