Boolean display value in BootstrapVue and VueJS

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 ! :)

lbris lbris · Accepted Answer · 2019-12-24T14:31:56

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

Boolean display value in BootstrapVue and VueJS

1 Answers