Skip to content
Advertisement

Change text color in BootstrapVue table if this column value is greater than another column value

I have a BootstrapVue table that looks like this;

enter image description here

I would like to change the text colour of the number in Age column to green if Age >= ID and to red if Age < ID.

Here is the code in a single HTML file.

JavaScript

I am using Vue.js v2 and BootstrapVue.

Advertisement

Answer

You can simply achieve it by using _cellVariants property.

Working Demo :

JavaScript
JavaScript
JavaScript
User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement