Задайте заданный c цвет фона ячейки в цикле 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 вычисляется в моем приложении. js и возвращается в шаблон. Некоторые строки нуждаются в красной ячейке, другие - в зеленой (я проверяю, имеют ли права RO (зеленый) или RW (красный)).

Проблема в том, что я не смог указать целевую c ячейку row, и если я установлю statusColor в 'red', весь столбец будет красным.

Как мне этого добиться?

Большое спасибо за вашу помощь.

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