How to change the color of column data in b-table Vue JS

Question

I am using vue js b-table, what I am trying to achieve is based on Health_Status/Availability_Status I want to add some color background to the table data.

Example " if Health_Status is critical I want to make it red background,

I have achieved the same thing with simple bootstrap like this using v-chip and calling a method on it, but I am not able to achieve the same thing with b-table.

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

Here is the part of code snippet which is not working:

.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";
    },
}

#

So can you guys suggest me what I am missing here or another way to accomplish the same using vue js b-table.

Answer 1

In the v-chip, you're calling the method with row.Health_Status , but with the displayed text, you write row.item.Health_Status . Should your method actually send row.item.Health_Status ? I imagine it's a simple syntax issue.

Answer 2

My guess is that you're using the wrong syntax for the version of your plugins. Since they've changed recently, so if you're on an old version and looking at the current docs it wont work for you.

The snippet below uses a syntax which requires Vue 2.6.x and Bootstrap-Vue 2.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>