Ketika bekerja dengan Bootstrap-Vue, kita seringkali ingin menampilkan data dalam bentuk tabel yang dinamis. Salah satu caranya adalah menggunakan slot untuk mem-render isi dari sebuah kolom dalam tabel. Namun, jika kita memiliki banyak kolom dengan tipe boolean dan ingin menampilkan setiap kolom tersebut dengan komponen custom yang berbeda-beda, maka kita perlu melakukan hal-hal yang lebih kompleks.

Dalam artikel ini, kita akan belajar bagaimana menggunakan slot dinamis dalam Bootstrap-Vue untuk mem-render isi dari sebuah kolom tabel dengan tipe boolean. Kita juga akan mengetahui bagaimana cara menggunakan metode helper untuk menggabungkan nama slot menjadi string yang dinamis.

Contoh

Kita memiliki sebuah tabel seperti berikut:

<b-table :items="items" :fields="columns">
</b-table>

Namun, kita ingin menampilkan isi dari sebuah kolom dengan tipe boolean dalam bentuk komponen custom. Kita dapat menggunakan slot untuk mem-render isi dari kolom tersebut.

<template v-slot:cell(active)="data" >
 <my-component :item="data.item" />
</template>

Namun, jika kita memiliki banyak kolom dengan tipe boolean dan ingin menampilkan setiap kolom tersebut dengan komponen custom yang berbeda-beda, maka kita perlu melakukan hal-hal yang lebih kompleks.

Menggunakan Slot Dinamis

Kita dapat menggunakan slot dinamis dalam Vue untuk mem-render isi dari sebuah kolom tabel dengan tipe boolean. Kita hanya perlu membuat sebuah metode helper yang akan menggabungkan nama slot menjadi string yang dinamis.

Contoh:

<template v-slot:[gomycell(b)]="data" v-for="b in booleanFields">
 <my-component :item="data.item" />
</template>

Kita juga perlu membuat sebuah metode helper untuk menggabungkan nama slot menjadi string yang dinamis.

Contoh:

methods: {
 gomycell(key) {
 return `cell(${key})`;
 }
}

Dengan menggunakan slot dinamis dan metode helper, kita dapat menampilkan isi dari sebuah kolom tabel dengan tipe boolean dalam bentuk komponen custom yang berbeda-beda.

Demo

Berikut adalah contoh demo yang menunjukkan bagaimana cara menggunakan slot dinamis dalam Bootstrap-Vue:

Vue.component('my-table', {
 template: '#my-table',
})

new Vue({
 el: '#app',
 data: {
 booleanFields: [true, false]
 },
 methods: {
 gomycell(key) {
 return `cell(${key})`;
 }
 }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
 <my-table>
 <template v-slot:[gomycell(b)]="data" v-for="b in booleanFields">
 <h3>who? {{ data.is }}</h3>
 </template>
 </my-table>
</div>

<template id="my-table">
 <div>
 <div style="color:green"><slot name="cell(true)" v-bind="{is: 'true!'}"></slot></div>
 <div style="color:red"><slot name="cell(false)" v-bind="{is: 'false!'}"></slot></div>
 </div>
</template>

Dengan menggunakan slot dinamis dan metode helper, kita dapat menampilkan isi dari sebuah kolom tabel dengan tipe boolean dalam bentuk komponen custom yang berbeda-beda.