Range / custom search in a Vue.js component

LittleLama

Link to test case: https://codesandbox.io/s/datatables-custom-search-yx5qlp?file=/src/App.vue
Debugger code (debug.datatables.net): nothing happens
Error messages shown: no one
Description of problem:
I would like to make a custom Vue.js component to trigg range search to DataTables.
Inspired from this example https://datatables.net/examples/plug-ins/range_filtering.html
I don't really understand how to manipulate ext library. So you would find many errors in my example. My goal is to send to DT custom search function, and moreover to recover them in DT to update my filter component so it can show what is currently filtered.
Thank you for your suggestions

LittleLama

What I need to do by doing this is to
* set searches programmatically regarding the route location of the page,
* set range searching
* recover custom search in DT instance to update filter component and let user modify it

allan

Remove this.table = this.$refs.table; in App.vue and it will at least run the table. However, I think there are a couple of issues in the Filters.vue file:

1. event.target.value.min (and .max) are undefined. :value="opt" is resolving as [object Object] (i.e. the toString() of the object you actually want). You could either use opt.min + '-' + opt.max and then split them to get the values, or use data-min and data-max, adding those attributes to the option element and reading them back.
2. You don't want to call applySearch when the select change event is triggered. If you did that, a new search would be added every single time an option is selected - and doesn't remove previous searches. Instead on change call draw() on the table.
3. Since you aren't adding the filter on change any more, you need to do it immediately when the component is created. Then it is only added once.

Allan