How to call a computed property in dynamic style?

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.

score 0 · Accepted Answer · answered Jan 16 '22 at 07:18

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

How to call a computed property in dynamic style?

1 Answers1