如何在Vue開關更改上觸發事件

我有一個Vue組件，它具有vue開關元素。當組件被加載時，開關必須根據數據設置爲ON或OFF。這當前正在'mounted（）'方法中發生。然後，當切換開關時，它需要進行一次API調用，以告知數據庫新的狀態。這是目前正在發生的'手錶'方法。如何在Vue開關更改上觸發事件

問題是因爲我正在'看'開關，當數據在掛載時被設置時，API調用會運行。因此，如果它設置爲ON並且導航到組件，則mounted（）方法將開關設置爲ON，但它也調用切換API方法將其關閉。因此，該視圖已開啓，但數據顯示它已關閉。

我試圖更改API事件，以便它發生在單擊方法上，但這不起作用，因爲它不能識別點擊並且該函數從不運行。

我該如何使API調用僅在點擊交換機時進行？

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

來源

2017-09-25 Linx

「我曾試圖使其發生在點擊的方法來改變API事件，但這不起作用」哪裏是你的企圖呢？點擊應該工作正常。 –

我把它拿出來，因爲它不起作用，但我將切換手錶改爲了方法，並向切換元素添加了@ click =「toggleMonitoring（）」，但方法在點擊時從未運行。 – Linx

我會建議使用您的模型（Vue 2）的雙向計算屬性。試圖在這裏更新代碼，但obvs沒有您的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; 
     } 
    } 
    } 
}

來源

2017-09-25 21:22:16

這工作很好，謝謝你的幫助 – Linx

取代具有watch的，創建計算的新的命名clickToggle。它的get函數返回toggle，它的set函數完成您在watch（以及最終設置toggle）中所做的操作。您的mounted可以不受懲罰地調整toggle。只有更改爲clickToggle才能完成其他任務。

來源

2017-09-25 21:09:44

如何在Vue開關更改上觸發事件

回答

相關問題