Vueスイッチでイベントを発生させる方法

Question

私はVueコンポーネントにvue-switch要素があります。コンポーネントがロードされると、データに応じてスイッチをONまたはOFFに設定する必要があります。これは現在、 'mounted（）'メソッド内で起こっています。次に、スイッチを切り替えると、データベースに新しい状態を伝えるAPI呼び出しを行う必要があります。これは現在、「時計」方法で起こっている。

問題は、私がスイッチを '見ている'ため、データがマウント時に設定されたときにAPIコールが実行されることです。したがって、ONに設定されている場合、コンポーネントにナビゲートすると、mounted（）メソッドはスイッチをONに設定しますが、それをオフにするTOggle APIメソッドも呼び出します。したがって、ビューにはオンだが、データにはオフと表示されます。

APIイベントをクリックメソッドで発生させるように変更しようとしましたが、クリックを認識せず、関数が実行されないため動作しません。

スイッチをクリックしたときにのみAPI呼び出しが行われるようにするにはどうすればよいですか？

代わり clickToggleという名前の計算された新しいを作成し、 watchを持つの

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）に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

。そのget関数はtoggleを返し、関数はwatch（最終的にはtoggleに設定）で何をしているのかを行います。 mountedは、toggleを無断で調整することができます。 clickToggleへの変更のみが他の処理を行います。