Getting close to the end but missing how to set an incoming msg. In my example I have three buttons and when I press one the others grey out and the one turns green. Pressing any other one works the same. What I want to do is set one to green on power up. Can't seem to get that piece working. Found some code from @buckskin that I modified but obviously missing a piece.
<template>
<v-app>
<div class="justify-center ma-4">
<v-card class="a2" width="100%" outlined>
<v-card-title class="a1" :class="justify-center">{{msg.payload}}</v-card-title>
<v-card-actions>
<v-btn class="btnBasic" :class="btnClass2" stacked @click="Power_Off">
<v-icon class="iconBasic" ref="icon1">{{icon1}}</v-icon>{{msg.payload1}}
</v-btn>
<v-btn class="btnBasic" :class="btnClass2" stacked @click="Power_On">
<v-icon class="iconBasic" ref="icon2">{{icon2}}</v-icon>Power On
</v-btn>
<v-btn class="btnBasic" :class="btnClass2" stacked @click="Power_Next">
<v-icon class="iconBasic" ref="icon3">{{icon3}}</v-icon>Power Never
</v-btn>
</v-card-actions>
</v-card>
</div>
</v-app>
</template>
<script>
export default {
data() {
return {
value: "OFF",
icon1: "mdi-bed",
icon2: "mdi-cog",
icon3: "mdi-abacus",
};
},
watch: {
msg: function(){
if (msg.payload == "start") {
this.icon1 = "mdi-cog";
this.$refs.icon1.$el.style.color = 'green';
this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608';
this.$refs.icon2.$el.style.color = 'grey';
this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608';
this.$refs.icon3.$el.style.color = 'grey';
this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608';
}
}
},
methods: {
Power_Off: function () {
this.icon1 = "mdi-cog";
this.$refs.icon1.$el.style.color = 'green';
this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608';
this.$refs.icon2.$el.style.color = 'grey';
this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608';
this.$refs.icon3.$el.style.color = 'grey';
this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608';
this.send({topic: "Power", payload:"Off"});
},
Power_On: function () {
this.icon1 = "mdi-bed";
this.$refs.icon1.$el.style.color = 'grey';
this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608';
this.$refs.icon2.$el.style.color = 'green';
this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608';
this.$refs.icon3.$el.style.color = 'grey';
this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608';
this.send({topic: "Power", payload:"On"});
},
Power_Next: function () {
this.$refs.icon1.$el.style.color = 'grey';
this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608';
this.$refs.icon2.$el.style.color = 'grey';
this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608';
this.$refs.icon3.$el.style.color = 'green';
this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608';
this.send({topic: "Power", payload:"On"});
},
},
}
</script>
<style scoped>
.btnBasic {
background-color: #4F4F4F;
/* Very dark gray */
color: white;
border-radius: 8px;
/*width: 75px !important;*/
height: 100% !important;
}
.btnBasic1 {
background-color: #4F4F4F;
/* Very dark gray */
color: green;
border-radius: 8px;
/*width: 75px !important;*/
height: 100% !important;
}
.btnBasic :hover {
background-color: blue;
/* Very dark gray */
color: red;
border-radius: 8px;
/*width: 75px !important;*/
height: 100% !important;
}
.btnOn {
color: green;
/* Dark washed rose */
}
.btnOff {
color: darkgrey;
}
.iconBasic {
font-size: 45px;
height: 100%;
width: 45px;
}
.iconOn {
color: red;
text-shadow: 0px 0px 0px;
;
}
.iconOff {
color: darkgrey;
text-shadow: 0px 0px 0px;
}
.a1 {
/* background-color:red; */
height: 50px;
margin-bottom: 1px;
font-size: 16px;
background-color: #303030;
color: white;
text-align: center padding-bottom: 4px;
border-bottom: 2px solid #DD7F00;
}
.a2 {
background-color: black;
height: 100%;
margin-top: 1px;
font-size: 60px;
color: #D7DBDD;
}
.b1 {
color: #6689A1;
height: 25px;
margin-bottom: 1px;
font-size: 16px;
padding-bottom: 4px;
border-bottom: 2px solid #DD7F00;
}
.b2 {
height: 100%;
margin-top: 1px;
font-size: 28px;
color: #D7DBDD;
}
</style>
Feel like I'm swimming in the deep end of the pool.
Any help appreciated,
Thanks
