vue-table-2 change search filter to fire on button click instead of keystroke

0
votes

working with https://github.com/matfish2/vue-tables-2 with Vue.js v2.6.11

Hello, a junior dev learning Vue.js (coming from React world). I'm trying change the filter/search box to fire on the click of a button I created, rather than after every keystroke (its default functionality). Eventually, I would also like to apply my own custom filters that are selected from a dropbox to apply when my search button is clicked.

I can't find the code where the search event is being triggered in order to redirect it to my button press. If anyone has any insight working with VueTables2 and could help point me in the right direction, it would be very much appreciated. Thanks!

1
vue.jsvuejs2vue-tables-2

1 Answers

0
votes

There's a way to do this using ref and a function, documented here

https://matanya.gitbook.io/vue-tables-2/methods

#1. Add ref to table

<v-client-table :columns="columns" v-model="data" :options="options" ref="myTable">

#2. add method

  methods: {
    customFilter: function(){
        this.$refs.myTable.setFilter('A')
    }

#3. add method as event listener

<button @click="customFilter">Filter 'A'</button>