如何在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开关更改上触发事件

回答

相关问题