如何在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;
}
}
}
我会建议使用您的模型(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;
}
}
}
}
这工作很好,谢谢你的帮助 – Linx
取代具有watch
的,创建计算的新的命名clickToggle
。它的get
函数返回toggle
,它的set
函数完成您在watch
(以及最终设置toggle
)中所做的操作。您的mounted
可以不受惩罚地调整toggle
。只有更改为clickToggle
才能完成其他任务。
“我曾试图使其发生在点击的方法来改变API事件,但这不起作用”哪里是你的企图呢?点击应该工作正常。 –
我把它拿出来,因为它不起作用,但我将切换手表改为了方法,并向切换元素添加了@ click =“toggleMonitoring()”,但方法在点击时从未运行。 – Linx