Boolean display value in BootstrapVue and VueJS - vue.js

Question

In my project I'm using BootstrapVue and VueJS. I'm currently doing a b-table and I have a boolean field in its fields. It displays correctly true and false, but I'd like to display something else (e.g. : Active for true and Inactive for false). I haven't found anything on how to do that (if there is something built-in, I haven't seen it in the docs).
Here is my current field declaration for the b-table of BootstrapVue :
table_fields: [
{ key: 'username', sortable: true },
{ key: 'firstName', sortable: true },
{ key: 'lastName', sortable: true },
{ key: 'isActive', sortable: true, label: 'Status'},
{ key: 'actions', label: 'Actions' }
]
The field that i'd like to change the behavior of is isActive.
Thanks in advance for your tips ! :)

Answer 1

I've found a way to do it, using what I could read HERE. Indeed it is possible to define custom slots.
Finally my field declaration looks like :
table_fields: [
{ key: 'username', sortable: true },
{ key: 'firstName', sortable: true },
{ key: 'lastName', sortable: true },
{ key: 'isActive', sortable: true, label: 'Status' },
{ key: 'actions', label: 'Actions' }
]
the little snippet for the custom slot :
<template v-slot:cell(isActive)="row">
<b-badge
v-if="row.item.isActive"
variant="success">
Active
</b-badge>
<b-badge
v-else
variant="warning">
Archived
</b-badge>
</template>
and my whole b-table :
<b-table
hover
:items="users"
:fields="table_fields">
<template v-slot:cell(isActive)="row">
<b-badge
v-if="row.item.isActive"
variant="success">
Active
</b-badge>
<b-badge
v-else
variant="warning">
Archived
</b-badge>
</template>
<template v-slot:cell(actions)="row">
<span v-if="row.item.isActive">
<b-button
to="#"
size="sm"
variant="primary"
class="mr-1"
title="Edit">
<font-awesome-icon :icon="['fas', 'pen']"/>
</b-button>
<b-button
#click="archiveUser(row.item.id)"
size="sm"
class="mr-1"
title="Archive">
<font-awesome-icon :icon="['fas', 'archive']"/>
</b-button>
</span>
<b-button
v-else
#click="unarchiveUser(row.item.id)"
variant="success"
size="sm"
class="mr-1"
title="Unarchive">
<font-awesome-icon :icon="['fas', 'caret-square-up']"/>
</b-button>
<b-button
#click="deleteUser(row.item.id)"
size="sm"
variant="danger"
class="mr-1"
title="Delete">
<font-awesome-icon :icon="['fas', 'trash-alt']"/>
</b-button>
</template>
</b-table>
and what it looks like :
You can see that in the column Status the b-badge is displayed instead of true or false