How to call a computed property in dynamic style? - vue.js

Question

I want to style Ant Design Vue button(inside a table row of Ant Design table) dynamically:
<template #status="{ text }">
<a-button ghost
:style="{'border-color': getColor(text) }">
</a-button>
</template>
And here is my computed propery(in script section):
const getColor = computed((status) => {
let color = '';
switch(status) {
case 'StatusA':
color = '#F97316';
break;
case 'StatusB':
color = '#EC4899';
break;
case 'StatusC':
color = '#8B5CF6'
break;
case 'StatusD':
color = '#16A34A';
break;
default:
color = "#5685EE";
}
return color;
})
But it is not working.
Error: This expression is not callable.Type 'String' has no call signatures
How do I do this?
Thanks.

Answer 1

Try to use computed property in options API by returning a function that takes the status as parameter:
setup(){
...
},
computed:{
getColor(){
return (status)=>{
let color = '';
switch(status) {
case 'StatusA':
color = '#F97316';
break;
case 'StatusB':
color = '#EC4899';
break;
case 'StatusC':
color = '#8B5CF6'
break;
case 'StatusD':
color = '#16A34A';
break;
default:
color = "#5685EE";
}
return color;
}
}
}
or just use function inside the setup :
const getColor = (status) => {
let color = '';
switch(status) {
case 'StatusA':
color = '#F97316';
break;
case 'StatusB':
color = '#EC4899';
break;
case 'StatusC':
color = '#8B5CF6'
break;
case 'StatusD':
color = '#16A34A';
break;
default:
color = "#5685EE";
}
return color;
}