Reputation: 144
I would like to know if there is a way in which I can dynamically apply classes targeting a specific cell in a Buefy table. As an example, the following is the code I am working on:
Template:
<b-table :data="status.peerStatus">
<template slot-scope="props">
<b-table-column :class="classObject" v-for="(column, index) in columns" :key="index"
:label="column.label" :visible="column.visible" :width="200">
{{ props.row[column.field] }}
</b-table-column>
</template>
</b-table>
Script:
computed: {
classObject() {
return {
"has-background-info": true
};
}
Right now, the whole row is getting highlighted in blue color due the has-background-info
being set to true.
What I would like to do, however, is to target only a particular cell and apply class conditionally by passing the value of the cell like so.
Right now, what I am trying is passing the value of the cell to classObject
like this
<b-table-column :class="classObject(props.row[column.field])" v-for="(column, index) in columns" :key="index"
And trying to set the class accordingly
computed: {
classObject(cellValue) {
return {
"has-background-info": cellValue === "YES" ? true : false;
};
}
However, the above doe not work. Is there any other way of doing this?
Upvotes: 2
Views: 3973
Reputation: 22403
You should put it in method
instead of computed
methods: {
classObject(cellValue) {
return {
"has-background-info": cellValue === "YES" ? true : false;
};
}
}
Upvotes: 2