关键知识点this.$forceUpdate()
介绍this.$forceUpdate():
是vue里面强制刷新的方法,一般用在数据层次太多,render函数无法自动更新,这时候需要手动更新,this.$forceUpdate()以此来更新数据和视图,触发updated生命周期,常用于for循环很多的时候或者嵌套很深的结构里面
注意:1.一般如果el-switch默认值没有赋值的话,也有可能导致开关无法点击,这时候给value一个默认值可以解决
2.开关无法点击的情况也有可能是z-index的原因,此时让el-switch开关处于最高堆叠顺序上就可以,设置z-switch:99999
<el-switch v-model="value"
active-color="#DCDFE6"
active-value="点击打开告警推送"
inactive-color="#4293DC"
inactive-value="点击关闭告警推送"
@change="changeSwitch(value)">
</el-switch>
export default {
data() {
return {
value: '',
value: true,
socket: '',
}
},
methods: {
changeSwitch(value) {
this.$forceUpdate()
if (value == '点击关闭告警推送') {
this.alarmPush()
} else {
this.socket.close()
this.socket && this.socket.close()
}
},
// 启动websocket,接受推送
</script>
<style lang="scss" scoped>
.auto-alarm-switch {
z-index: 9999;
}
</style>