Vue-tables-2: Custom Filter issue

[djokoabdullah]

• Vue.js version: 2.2.6
• relevant code:

...
customFilters: ['score'],
filterByColumn:true,
...

I use jquery slider:

$( "#slider-range-ces" ).slider({
      range: true,
      min: 1,
      max: 10,
      values: [ 1, 10 ],
      slide: function( event, ui ) {
        $( "#amount-ces" ).val(ui.values[ 0 ] + " - " + ui.values[ 1 ] );
    EventBus.$emit('vue-tables.filter::score', $('#amount-ces').val());
      }
    });

I already used event emit, but somehow the filter query was not send. Can you please explain how to use custom filter correctly? Thanks.

[ixperiencenl]

I use a filter function for this. This way you can create dynamic filters. I can call it from wherever in my view.

toggleFilter(filterName, $event) { this.loadingData = true; // show a spinner or something this.$refs.tableName.setPage(1); // this is important, because sometimes it gets stuck on an empty page setTimeout(function(){ // use a timeout to prevent unneccessary traffic if (typeof $event === 'string') { var searchItem = $event; } else { var searchItem = $event.target.value; } var table = this.$refs.tableName; var value = searchItem; table.customQueries[filterName] = value; table.getData(); // this will send the request this.loadingData = false; }.bind(this), 1000); }

You can call a filter by (for example) on a change:
@change="toggleFilter('filename', $event)" -- this will then send a filter on the field 'filename'

In the Laravel (or whatever) backend you can then grab the input request and add it to your query.

[matfish2]

@djokoabdullah, your code seems fine. Is the slide method being called?
Note that if you are using the name prop then the event is vue-tables.my-table-name.filter::score

[jbrryhooves]

Thanks @matfish2 for the response. Can I suggest this tip (when using the name prop) to be added to docs? I just scoured the internet for this solution..!