I have successfully implemented a slot for the header in vue-bootstrap, allowing me to add a show and hide button with a search box in each column header. The header is placed within a slot and the fields data includes a showFilter property that toggles between true and false. Although emitting data changes from the child component to the parent works fine, the table itself does not update until another action is triggered, like sorting a header. I attempted to force refresh the table data as mentioned in the documentation, but it did not seem to work or I could not understand how to implement it properly without an example.
Parent
<template>
<b-table
ref="table"
:items="filtered"
:fields="fields"
sort-icon-left
responsive="sm"
>
<template v-slot:head()="data">
<TableHeader :data="data" :filters="filters" />
</template>
</b-table>
</template>
data() {
return {
fields: [
{
key: "name",
sortable: true,
showFilters: true,
},
{ key: "age", sortable: true, showFilters: true },
],
}
}
Child
<template>
<div>
<div class="text-info">{{ data.label.toUpperCase() }}</div>
<div>
<button @click="setUpdate(data.field)">filters</button>
</div>
<input
v-show="data.field.showFilters"
v-model="filters[data.field.key]"
:placeholder="data.label"
@keyup="$emit('update:filters[data.field.key]')"
/>
</div>
</template>
methods: {
setUpdate(field) {
this._originalField = Object.assign({}, field);
field.showFilters = !field.showFilters;
this.$root.$emit("update:field.showFilters", "bv::refresh::table");
console.log(field.showFilters);
}
}