Trying to figure out what I'm missing here, it seems like this should be the solution: Vue: method is not a function within inline-template component tag
Yet, the method still isn't working as expected.
<b-table
:items="filtered"
:fields="fields"
sort-icon-left
responsive="sm"
@card-click="setUpdate"
>
<template v-slot:head()="data">
<span class="text-info">{{ data.label.toUpperCase() }}</span>
<button @click="$emit('card-click', data)">filter</button>
<input
v-show="data.field.showFilters"
v-model="filters[data.field.key]"
:placeholder="data.label"
/>
</template>
</b-table>
methods: {
setUpdate(field) {
console.log("hello");
console.log(field);
this._originalField = Object.assign({}, field);
field.showFilters = true;
}
}
Update:
Using @click helped trigger the event, but then the table wouldn't update with the modified data containing showFilters. Thanks to MattBoothDev, I came across event-based-refreshing-of-data, which unfortunately now prevents the data from changing. For instance, if field.showFilters is true, it remains true even after clicking the button.
methods: {
setUpdate(field) {
this._originalField = Object.assign({}, field);
field.showFilters = !field.showFilters;
this.refreshTable();
console.log(field.showFilters);
},
refreshTable() {
this.$root.$emit("bv::refresh::table", "my-table");
}
}