How to call a computed property in dynamic style?

January 16, 2022

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.

>Solution :

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;
}