cannot add style on vue.js etemplate using a function-CodePudding

I'm trying to generate the text of a style tah usign a function in vue.js

<template>

        <div  :style="setColor(c.percentage, c.blocked)">
       
</template>

<script>
export default {
  name: "",
  methods:{
    setColor(percentage,blocked){
      let opacity = (percentage / 100).toFixed(2);
      let color = '145,223,150';
      if(blocked){
        opacity = 0.6;
        color = '234,59,37'
      }else{
        if(opacity>0){
          if(opacity < 0.1){
            opacity = 0.1;
          }
          color = '145,223,150'
        }else{
          opacity = 1;
          color = '255,255,255';
        }
      }
      return `rgba(${color},${opacity})`;
    }
  }
}
</script>

<style scoped>

</style>

but it generates that code

<div  style=""></div>

I don't know what is wrong , do I missed something?First time on vue and I have a lot to learn xD

CodePudding user response：

From the method you should return an object that has color or background-color as property and rgba(${color},${opacity})`; as value :

return {color:`rgba(${color},${opacity})`};