Comment déclencher un événement sur un changement de commutateur Vue

Question

J'ai un composant Vue qui possède un élément vue-switch. Lorsque le composant est chargé, le commutateur doit être réglé sur ON ou OFF selon les données. Cela se passe actuellement dans la méthode 'mounted()'. Ensuite, lorsque le commutateur est basculé, il doit effectuer un appel API qui indiquera à la base de données le nouvel état. Cela se passe actuellement dans la méthode 'watch'. Le problème est que parce que je surveille le commutateur, l'appel de l'API s'exécute lorsque les données sont définies sur le montage. Ainsi, si elle est définie sur ON et que vous accédez au composant, la méthode mounted() définit le commutateur sur ON, mais elle appelle également la méthode API à bascule qui l'éteint. Par conséquent, la vue dit que c'est allumé, mais les données disent que c'est éteint.

J'ai essayé de modifier l'événement API pour qu'il se produise sur une méthode de clic, mais cela ne fonctionne pas car il ne reconnaît pas un clic et la fonction ne s'exécute jamais.

Comment est-ce que je fais en sorte que l'appel d'API est fait seulement quand le commutateur est cliqué?

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

Je vous recommande d'utiliser une propriété calculée à deux voies pour votre modèle (Vue 2). Vous avez tenté de mettre à jour le code ici, mais vous ne l'avez pas testé sans votre configuration Vuex. Pour référence, s'il vous plaît voir 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

Au lieu d'avoir un watch, créez un nouveau nom calculé clickToggle. Sa fonction get renvoie toggle, sa fonction set fait ce que vous faites dans votre watch (ainsi que, finalement, le réglage toggle). Votre mounted peut ajuster toggle en toute impunité. Seuls les changements à clickToggle feront l'autre chose.