Trying to create a custom style text using a function in vue.js
<template>
<div class="col-md-3" :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>
However, it is generating this code instead:
<div class="col-md-3" style=""></div>
Uncertain what went wrong, did I forget something? Just starting out with vue and there's much to grasp xD