I need some help with a popular vue libraries https://www.npmjs.com/package/vue-tables-2.
I have a filter fixed for the rows but now I need the filtered rows(the objects of rows) stored in an array does anyone know how to achieve this?
I hope this is integrated in the libraries itself because I don't like to fix a hacky solution.
I tried to look it up in the documentation but I couldn't find anything.
Short answer:
You can use the
allFilteredDataproperty of the component.
Longer answer using working examples:
You can use a ref on an instance of the table component and then access the allFilteredData property.
Here are two examples:
The code below in available in a full fiddle. Typing "zi" into the filter for example and clcking the "Process Filtered Result" button under the table. Clicking the button results in a method accessing the allFilteredData property.
https://jsfiddle.net/tzdw17qo/
Given this partial code from that fiddle example:
<v-client-table ref="countries" :columns="columns" v-model="data" :options="options">...</v-client-table>
<button @click="handleFilteredResult">Process Filtered Result</button>
<textarea ref="json_dump"></textarea>
A method such as this will have the reference to the filtered data to do something more useful with. This is just a basic working example:
methods: {
/**
* Log out allFilteredData for now for demo only
* @TODO Something specific with the data
*/
handleFilteredResult () {
// log the value of the allFilteredData attribute
console.log({allFilteredData: this.$refs.countries.allFilteredData});
// for example write the json version out to a textarea:
this.$refs.json_dump.value = JSON.stringify(this.$refs.countries.allFilteredData);
}
},
Then another example where listening to the "filter" event:
https://jsfiddle.net/ev645umy/
Html from the fiddle:
<!-- bind to the `filter` event of the component -->
<v-client-table ref="countries" @filter="onFilter" :columns="columns" v-model="gridData" :options="options">
JavaScript from the fiddle:
methods: {
/**
* Log out allFilteredData for now for demo only
* @TODO Something specific with the data
*/
onFilter () {
// as of this writing, the `filter` event fires before the data is filtered so we wait to access the filtered data
setTimeout(() => {
console.log({allFilteredData: this.$refs.countries.allFilteredData});
this.$refs.json_dump.value = JSON.stringify(this.$refs.countries.allFilteredData);
}, 250);
}
},
More info:
