Currently, I am utilizing Bootstrap Vue in a test application. My objective is to modify the variant of a table cell based on its value. Unfortunately, the variant parameter does not accept a function, leading me to search for alternative solutions.
Listed below is my code snippet:
var app = new Vue({
el: '#app',
data: {
items: [], //Populated via AJAX
fields: [
{
key: 'Vendedor',
label: 'Vendedor'
},
{
key: 'OBJETIVO',
label: 'Objetivo',
formatter: (value) => { return parseFloat(value).toFixed(2)},
variant: estiloObjetivo //Issue with this line
}
]
},
methods: {
Cargar: function () {
var salesperson = getCookie('salespersonCode');
var url_servicio = 'http://MywebService/';
var self = this;
$.ajax({
type: 'GET',
url: url_servicio + 'ventas/' + salesperson,
dataType: "json",
success: function(data){
self.items = data
}
});
},
estiloObjetivo (value) {
if value > 0
return 'danger'
else
return 'success'
}
}
})
The HTML section associated with my code:
<div id="app">
<button v-on:click="Cargar">Cargar</button>
<b-table striped hover :fields="fields" :items="items"></b-table>
</div>
Any suggestions on how I can dynamically style a Bootstrap-Vue cell?
In the documentation, styling is set within the "items" array. However, in scenarios like mine where data is retrieved from a web service, how can I achieve this?:
{
salesperson: 'John',
Objetivo: 2000,
_cellVariants: { salesperson: 'success', Objetivo: 'danger'}
},
Therefore, I am seeking a method to customize the _cellVariants parameter of each element in the 'items' array.