Search code examples
javascriptvue.jsvuejs2vue-tables-2

Vue-tables-2 detecting which filter was applied

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'
          }]
        }
    }
  }
});
Solution

  • 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:

    enter image description here

    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!