Vue-tables-2 detecting which filter was applied

Question

I am trying to set up a basic server side vue-tables-2 with two filters - one is a dropdown and the other is a search field. I am having trouble detecting which of the two filters were applied within the requestFunction() so I can send a request over to the server. Currently, I am just trying to console log the input filter name and value as the filter is applied / input is changed.

JSFiddle:

https://jsfiddle.net/kbpq5vb3/39/

HTML

<h1 class="vue-title">Vue Tables 2 Demo</h1>

<div id="app">
  <v-server-table url="https://jsonplaceholder.typicode.com/users" :columns="columns" :options="options"></v-server-table>
</div>

VueTable:

    Vue.use(VueTables.ServerTable);

new Vue({
  el: "#people",
  data: {
    columns: ['name', 'username'],
    options: {
      requestAdapter(data) {
          console.log(data.query); // detect which filter was applied / which input changed
        },
        responseAdapter(resp) {
          return {
            data: resp,
            count: resp.length
          }
        },
        filterByColumn: true,
        filterable: ['name', 'username'],
        listColumns: {
          name: [{
            id: 'ervin',
            text: 'Ervin'
          }, {
            id: 'chelsey',
            text: 'Chelsey'
          }]
        }
    }
  }
});

According to the [documentation](https://github.com/matfish2/vue-tables-2#events), `vue-tables.filter / tableName/FILTER` *fires off when a filter is changed.* — Derek Pollard, Dec 28 '17 at 21:27
You should be able to view the event in your Vue developer tools under the "Events" tab to the right. — Derek Pollard, Dec 28 '17 at 21:28
@Derek thanks. Yes I saw that, however I tried implementing that unsuccessfully as I need access to that event within the request adapter and the documentation is poor as it doesn’t contain any examples in how to properly use that. Do you understand how that works? Can you update the fiddle with a basic example? — AnchovyLegend, Dec 28 '17 at 21:38

score 1 · Accepted Answer · edited Jul 16 '22 at 02:09

1

According to the vue-tables-2 documentation:

vue-tables.filter/tableName/FILTER fires off when a filter is changed.

After looking a bit deeper, it really is as easy as listening for an event:

Vue developer tools really make this type of stuff easy to diagnose. Now, you'd want to listen to the custom event. You can learn how to do that over on the Vue documentation.

Finally, here is a working fiddle that shows how you listen to these events: https://jsfiddle.net/kbpq5vb3/55/

Hope this helps!

edited Jul 16 '22 at 02:09

tony19

125,647
18
229
307

answered Dec 28 '17 at 21:37

Derek Pollard

6,953
6
39
59

thanks for the help Derek. Unfortunately, it’s really not clear to me how this all works from the documentation alone. I need access to the filter key and value within the request adapter and there’s not even one implementation example in the docs. – AnchovyLegend Dec 28 '17 at 21:43
@AnchovyLegend give me a few and I'll show you with a fiddle – Derek Pollard Dec 28 '17 at 21:43
@AnchovyLegend here's a good starting point for you: https://jsfiddle.net/kbpq5vb3/55/ – Derek Pollard Dec 28 '17 at 22:06
Thanks for the help @Derek, it ended up being a lot simpler than what I expected. I wonder if we can somehow invoke request adapter when listenTo is applied.. – AnchovyLegend Dec 29 '17 at 08:14

Vue-tables-2 detecting which filter was applied

1 Answers1