I want to set the CSS property of a class using rgb(redComp, greenComp, blueComp) format. I want to get these components from Vuejs component code.
.progress {
color: rgb(256,0,0);
border-radius: 0px;
}
I want the CSS to be something like :-
.progress {
color: rgb(redComp, greenComp, blueComp);
border-radius: 0px;
}
Where redComp, greenComp and blueComp will be variables in the VueJS Component. How can I implement this?
The only way to do that is to set the element :style attribute usint a computed property.
In your template part :
<div :style="dynamicStyle"></div>
In your vue part :
/...
computed : {
dynamicStyle() {
return {
// in the case of redComp, greenComp and blueComp are a vue prop or data
color : `rgb(${this.redComp}, ${this.greenComp}, ${this.blueComp});`,
};
},
},
/...
I faced a similar issue. I need to have a background-color based on the data from an object vue.
So this was my approach.
new Vue({
el: "#app",
data: {
getQuestionAnswers: [
{
name: 'foo',
color: {
red: '0',
green: '0',
blue: '0'
}
},
{
name: 'bar',
color: {
red: '127',
green: '127',
blue: '127'
}
},
{
name: 'baz',
color: {
red: '255',
green: '255',
blue: '255'
}
}
]
}
})body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
color: red;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
.red {
color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div
v-for="(group) in getQuestionAnswers"
>
<div :style="{ 'background-color': `rgb(${group.color.red}, ${group.color.green}, ${group.color.blue})`}">
{{ group.name }}
</div>
</div>
</div>
With Vue 3, you can now directly bind css values to reactive state.
You cannot manipulate css with javascript. You can directly manipulate the style attribute of an element, as in throrin19's answer, but you should probalbly try to use css and the class list instead. I've never met a style problem I couldn't fix by combining classes, and the result will be more declarative in style, and likely smoother in effect.
Vue lets you specify an array of reactive classes <div v-bind:class="[activeClass, errorClass]"> You can put static classes in the same array, use ternary expressions etc.
Why do you want to do this? One reason would be to animate a colour change. If so, the best way to do this is with css transition. Your code stays declarative. See the details here.
