passing an object variable into :ds-filter-fields

[keithjohnsdev]

Hi @kouts,

Let me start by saying I've been enjoying vue-dataset very much! You've done a great job here, so please read this as more of a question than a complaint.

I'm trying to add custom filtering to a dataset table, by building a "filterObject" object and then passing that as the value of the ds-filter-fields prop:

let filterObject = { id: 115 }
:ds-filter-fields="filterObject"

But it doesn't seem to be working. It works correctly when I explicitly define the object inline:

:ds-filter-fields="{ id: 115 }"

I've tried it as a ref:

let filterObject = ref({ id: 115 })
:ds-filter-fields="filterObject.value"

I've also tried as a reactive object to no success, but I haven't tried as a computed variable.

Is there a way to make it work by passing an object variable? Is there something I'm missing?

Thanks for any help!

[keithjohnsdev]

perhaps it's not automatically updating/re-rendering the table?

edit: upon further testing, this seems to be the case. The filter gets applied and the filtered data table shows correctly if I hit sort, forcing it to update. How can this be achieved without leveraging the sort functionality?

final edit: I found a workaround. Once I put the filters as a field in the reactive state object that also contained the data, it appears to render on change now. Let me know if I should delete this issue if it's not relevant anymore. Thank you again!

[kouts]

Hey @keithjohnsdev maybe this example helps a bit with what you are trying to do?
https://next--vue-dataset-demo.netlify.app/examples/cards/

Here's the code: https://github.com/kouts/vue-dataset/blob/next/docs/.vuepress/components/Example2.vue