0

I am using a "b-table" with ":fields" and ":items", I already know how to customize specific fields with "v-slot:cell(keyname)". But know I want to get the value of each element in this column and display it differently depending on its value. Is there a way to do this?

My table looks like this

        <b-table
                striped hover
                responsive
                :fields="shotlist_tab.fields"
                :items="shotlist_tab.shots">

            <template v-slot:cell(frame)>
                <!-- ACCESS ELEMENT -->
                <div v-if="???">
                    <font-awesome-icon class="icon" :icon="['fas', 'image']"/>
                </div>
                <div v-else>
                    <img src="../../assets/logo.png" height="50" width="50" alt="frame"/>
                </div>

I have already create a standard table with v-for="(object, index) in objects" where I can access each data with object.element I want to replicate this with the b-table.

HTLWelsITLover99
  • 199
  • 1
  • 4
  • 10

1 Answers1

2

The slots are scoped, meaning you are passed the cells value, along with additional information (i.e. the entire row data, the field definition for the cell, etc).

<template v-slot:cell(frame)="scope">
  <!-- You may need to adjust the condition/check for your situation -->
  <div v-if="scope.value === null">
    <font-awesome-icon class="icon" :icon="['fas', 'image']"/>
  </div>
  <div v-else>
    <img src="../../assets/logo.png" height="50" width="50" alt="frame"/>
  </div>
</template>

Refer to the docs for custom data rendering at: https://bootstrap-vue.js.org/docs/components/table#custom-data-rendering

Troy Morehouse
  • 5,320
  • 1
  • 27
  • 38