Dynamically change background color
-
Hi folks, is this possible if one is not using themes? I want to change the background colors of my left/right drawers:
<q-drawer show-if-above v-model="left" side="left" bordered :content-style="{'background-color' : leftColor}"> <!-- drawer content --> </q-drawer> <q-drawer show-if-above v-model="right" side="right" bordered :content-style="{'background-color' : rightColor}"> <!-- drawer content --> </q-drawer> data: function () { return { version: QMediaPlayer.version, left: false, right: false, leftColor: "#000000", rightColor: "#000000", ... methods: { onTimeUpdate(currentTime, remaining) { axios.get("/color?time="+currentTime).then(function(response){ let data = response.data; this.leftColor = data[0]; this.rightColor = data[1]; }); }
But the drawers are not updating (the http call is working as expected and I can see the variables changing but the components do not update. Is there a way to do this?
Thank you
-
@vinnyc said in Dynamically change background color:
background-color
Can you change background-color to backgroundColor in style and see if that helps?
-
yep that helped
also moved it to its own json object:
leftStyle: {backgroundColor: '#000000'}
andself.leftStyle.backgroundColor = data[0];
does the trick. Thank you