Custom Searchbox for vue-table-2 - vue.js

Question

Using Vue Table 2, I do not want to use the default search/filter input and the Records drop down. I.e. I do not want to use controls in the image below:
Instead, I want to create my own input box outside the table. I am able to hide the default row containing the image above. However, after adding my own input box - example:
<input type="text" v-model="searchTerm" v-on:keyup='filterResult()' />,
How can I trigger the filter event to process my filter request in the filterResult() method?
data(){
return {
searchTerm:'',
customFilters: [{
name: 'mysearch',
callback: function (row, query) {
return row.name[0] == query;
}
}],
},
},
methods:{
filterResult(){
//how to trigger event to filter result using the searchTerm
}
}

Answer 1

Given a table definition like this, where tableoptions its an object containing the options you are applying to your table(these have to match their documentation), in this case i'm only adding customFilters, but you might have columns, headings or others
<v-client-table :options="tableoptions">
</v-client-table>
In their documentation it says that you should use this to trigger the custom filter
Event.$emit('vue-tables.filter::alphabet', query);
But it fails to say that Event it's VueTables.Event, so you will need to update your js to the following:
data() {
return {
searchTerm: '',
tableoptions: {
customFilters: [{
name: 'mysearch',
callback: function(row, query) {
//this should be updated to match your data objects
return row.name[0] == query;
}
}]
},
},
},
methods: {
filterResult() {
VueTables.Event.$emit('vue-tables.filter::mysearch', query);
}
}