Как изменить цвет данных столбца в b-таблице Vue JS

Question

Я использую vue js b-table, то, что я пытаюсь добиться, основано на Health_Status / Availability_Status. Я хочу добавить некоторый цветной фон к данным таблицы.

Пример "если Health_Status имеет значениеЯ хочу сделать это красным фоном,

Я добился того же самого с помощью простого начального загрузчика, такого как V-chip, и вызвав для него метод, но я не могу достичь того жес b-таблицей.

<td class="text-sm-left">
     <v-chip :color="getColor(item.severity)" dark>{{ item.severity }}</v-chip>
</td>

Вот фрагмент кода, который не работает:

.vue

<b-table :items="items" :fields="fields" striped responsive="sm">
   <template v-slot:Health_Status="row">
            <v-chip
              :color="getColor(row.Health_Status)"
              dark
            >{{ row.item.Health_Status}}</v-chip>
        </template>
</b-table>

.JSON

 items: [
          { Name:'RO Site', Availability_Status: 'up', Health_Status: 'critical' },
          { Name:'WO Site', Availability_Status: 'down', Health_Status: 'critical' },
          { Name:'PO Site', Availability_Status: 'up',Health_Status: 'critical'},
          { Name:'GO Site', Availability_Status: 'down', Health_Status: 'critical' }
        ], 

#method (return the color code)
methods: {
    getColor(Health_Status) {
      if (Health_Status === 'critical') return "red";
      else return "green";
    },
}

#

Итак, вы, ребята, можете мне подсказать, чего мне здесь не хватает, или другого способа добиться того же, используя vue js b-table.

Answer 1

Я предполагаю, что вы используете неправильный синтаксис для версии ваших плагинов. Поскольку они недавно изменились, поэтому, если вы используете старую версию и просматриваете текущие документы, она не будет работать для вас.

В приведенном ниже фрагменте используется синтаксис, который требует Vue 2.6.x и Bootstrap-Vue2.0.x.

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        items: [
          { Name:'RO Site', Availability_Status: 'up', Health_Status: 'critical' },
          { Name:'WO Site', Availability_Status: 'down', Health_Status: 'normal' },
          { Name:'PO Site', Availability_Status: 'up',Health_Status: 'normal'},
          { Name:'GO Site', Availability_Status: 'down', Health_Status: 'critical' }
        ]
      }
    },
    methods: {
      getColor(status) {
        if(status === 'critical') return "red"
      
        return "green";
      }
    }
  })
}

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <b-table :items="items">
    <!-- 
    Using the syntax v-slot:cell(field)="{ value }" means you can type value directly instead of doing row.value
    -->
    <template v-slot:cell(health_status)="{ value }">
      <span :style="`color: ${getColor(value)}`">
        {{ value }}
      </span>
      <!-- this should work for you too
      <v-chip :color="getColor(value)">
      </v-chip>
      -->
    </template>
  </b-table>
</div>

Answer 2

В v-chip вы вызываете метод с помощью row.Health_Status, но с отображаемым текстом вы пишете row.item.Health_Status. Должен ли ваш метод на самом деле отправить row.item.Health_Status? Я предполагаю, что это простая проблема синтаксиса.