Set a CSS Property (color) to a VueJS Variable

user_4965644 0
Viewed 9672

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?

vuejs2 css
3 Answers

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>

user_63840370
Related