[英]How to call a computed property in dynamic style?
I want to style Ant Design Vue button(inside a table row of Ant Design table) dynamically:我想动态设置 Ant 设计 Vue 按钮(在 Ant 设计表的表行内):
<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.
谢谢。
Try to use computed property in options API by returning a function that takes the status as parameter:尝试通过返回将状态作为参数的 function 来在选项 API 中使用计算属性:
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:或者只是在设置中使用 function :
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.