Can't get Custom Filter to work (Autocomplete)

[molerat619]

• Vue.js version: 2.5.13
• consumed using: Laravel

Hey @matfish2 - first of all, thank you so much for this module and all your work. I really appreciate it.

I have been trying to set up a custom filter to use my autocomplete module to find an employee. For that, I have done the following:

1. Remove employee_id from the filterable array in order to get rid of the default filter control.
2. Add employee_idto the customFilters array.
3. Emit the Event using following line, as soon as the employee has been selected:

this.$refs.taskTable.setFilter({employee_id: value.id});

Now this actually sends out a request, but the employee_id-field is empty and I get the following Error in the console.

Error in setting filter value. Column 'employee_id' does not exist. (on v-server-table I have set ref="taskTable"). Here is the full Log:

vue.common.js:8451 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
set-filters-dom.js:20 vue-tables-2: Error in setting filter value. Column 'employee_id' does not exist.
module.exports @ set-filters-dom.js:20
boundFn @ vue.common.js:192
module.exports @ set-filter.js:33
boundFn @ vue.common.js:192
filterByEmployee @ TasksIndex.vue:397
boundFn @ vue.common.js:192
invoker @ vue.common.js:2006
Vue.$emit @ vue.common.js:2517
onSelectItem @ v-autocomplete.js:1
boundFn @ vue.common.js:192
onClickItem @ v-autocomplete.js:1
boundFn @ vue.common.js:192
click @ v-autocomplete.js:1
invoker @ vue.common.js:2006
fn._withTask.fn._withTask @ vue.common.js:1804

If I use Event.$emit('vue-tables.filter::employee_id', value.id); instead that sends out a request without error, but it does not put the employee_id inside the query, but on the same level:

I am not sure if I am doing it wrong or if it is a bug. Looking forward to your response.

[matfish2]

setFilter is used only for "normal" filters, which is why you get the exception telling you that the column does not exist. As documented, firing an event is the correct way of sending a custom filter. As for adding it inside the query parameter, custom filters are used independently of normal column filters, and so can be used even when the user has a generic filter in place, or no filter at all. This means that the query object will not always be present (i.e it can either be a string, or not exist at all). Admittedly, in your specific use-case it would have been better to treat it as a "normal" filter.

[molerat619]

I see. I am using the Eloquent-class which does not take that "external" or independent attribute from the $request. Can I add it to the query, before the filter is sent or do I have to handle it on the server side? If the latter, I would be thankful for a hint on how to do it. Thank you :)

[matfish2]

You can add it either on the client side, using the requestAdapter function, or on the server side, using some simple array manipulation before you pass the request (You might want to consider passing the request to the class from the controller, and not read it directly from the class. This way you don't have to meddle with the core class).

[molerat619]

Thank you, that was simple. Here is how I did it:

requestAdapter: function(data){
    if(data.employee_id){
        data.query.employee_id = data.employee_id;
    }

       return data;
}