Set a CSS Property (color) to a VueJS Variable

Question

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?

Answer 1

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});`,
        };
    },
},
/...