I'm facing a challenge with implementing a custom filter in vue-tables-2 that should emit an event from a nested, single-page component in Vue. It seems like the issue might be related to not handling it correctly in the parent components.
Inside the custom template for dataTable, I have a custom filter called <filter-brand /> which triggers the event
Event.$emit("vue-tables.filter::filterByBrand", this.brand)The goal is to capture the 'filterByBrand' event in a top-level router component named <Grid />, where I have the <v-client-table /> along with the relevant options including the customFilters.
Any insights on where things might have gone wrong?
Grid.vue
...
customFilters: [
{
name: "filterByBrand",
callback: function(row, query) {
console.log("filter=", query); // nothing?
return row.name[0] === query;
},
},
],
...
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { ClientTable, Event } from "vue-tables-2";
import "./scss/index.scss";
Vue.use(ClientTable, {}, false, "bootstrap4", {
filtersRow: FiltersRow,
genericFilter: FilterKeyword,
sortControl: SortControl,
tableHeading: TableHeading,
dataTable: DataTable, // where my custom filter <filter-brand /> resides
});
Vue.use(Event);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App),
}).$mount("#app");
FilterBrand.vue
<template>
<div class="form-group position-relative">
<label for="brandFilter">
Brand:
</label>
<select
name="brandFilter"
id="brandFilter"
class="form-control select"
@change="handleChange($event)"
v-model="brand"
>
<option disabled selected value="">Choose</option>
<option value="All">All</option>
<option value="Brand 1">Brand 1</option>
<option value="Brand 2">Brand 2</option>
</select>
</div>
</template>
<script>
import { Event } from "vue-tables-2"; // importing here to avoid 'window' event
export default {
name: "FilterBrand",
props: ["props"],
data() {
return {
brand: "",
};
},
methods: {
handleChange(event) {
this.brand = event.target.value;
Event.$emit("vue-tables.filter::filterByBrand", this.brand); // where does this go?? :)
},
},
};
</script>