javascript - How to fire an event on Vue switch change - Stack Overflow

admin管理员组

文章数量:1403443

I have a Vue ponent that has a vue-switch element. When the ponent 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.

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 ponent, 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.

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.

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
    }
},
puted: {
    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;
    }
  }
}

I have a Vue ponent that has a vue-switch element. When the ponent 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.

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 ponent, 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.

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.

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
    }
},
puted: {
    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;
    }
  }
}

• javascript
• vue.js
• vue-ponent

Share Improve this question Follow edited Sep 26, 2017 at 3:16 Bert 82.5k1717 gold badges203203 silver badges166166 bronze badges asked Sep 25, 2017 at 20:41 LinxLinx 76355 gold badges1818 silver badges3737 bronze badges 2

• "I have tried to change the API event so that it happens on a click method, but this doesn't work" Where is your attempt at this? Click should work fine. – Brian Glaz Commented Sep 25, 2017 at 20:45
• I took it out because it didn't work but I changed the toggle watch to a method and added @click="toggleMonitoring()" to the switch element but the method never ran when it was clicked. – Linx Commented Sep 25, 2017 at 21:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I would remend using a 2-way puted 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
  }
},
puted: {
  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.mit('setToggle', false);
        this.noAvailableMonitoring = true;
      }
    }
  }
}

Instead of having a watch, create a new puted named clickToggle. Its get function returns toggle, its set function does what you're doing in your watch (as well as, ultimately, setting toggle). Your mounted can adjust toggle with impunity. Only changes to clickToggle will do the other stuff.

本文标签： javascriptHow to fire an event on Vue switch changeStack Overflow