以v-for循环中的特定单元格背景颜色为目标

Question

使用vuejs，我用以下代码用一些数据填充一个表：

<tr v-for="droit in listedroit">
<td>{{ droit.id_u }}</td>
<td>{{ droit.role }}</td>
<td>{{ droit.id_e }}</td>
<td>{{ droit.droits }}</td>
<td v-bind:style="{ 'background-color': statusColor }">STATUS</td>
</tr>

statusColor在我的app.js中计算并返回到模板中。一些行需要一个红色单元格，另一些行需要绿色单元格(我检查权限是RO(绿色(还是RW(红色((。

问题是，我未能针对一行的特定单元格，如果我将statusColor设置为"红色"，则整列都是红色的。

我怎样才能做到这一点？

非常感谢你的帮助。

Answer 1

您可以使用方法而不是计算属性

<template>
<tr v-for="droit in listedroit">
<td>{{ droit.id_u }}</td>
<td>{{ droit.role }}</td>
<td>{{ droit.id_e }}</td>
<td>{{ droit.droits }}</td>
<td v-bind:style="{ 'background-color': statusColor(droit.rights) }">STATUS</td>
</tr>
</template>

---

export default{
methods: {
statusColor(rights){
if(rights === 'RO'){ 
return 'green'; 
} else { 
return 'red'; 
}
}
}
}