vuejs / vuefire

🔥 Firebase bindings for Vue.js
https://vuefire.vuejs.org
MIT License
3.84k stars 331 forks source link

[Question] Handle data dynamically (per page) #98

Closed Frondor closed 7 years ago

Frondor commented 7 years ago

When using something like Vue DataTables and dealing with large amount of records.

Let's say I have db.ref('items').limitToFirst(20) with 21 items, if the DataTable component has a configuration of 10 items per page, it will generate 2 pages.

But I can explicitly "tell" to that DataTable component that I have 21 items (although I didn't query for the one missing yet) for it to generate a 3rd page, and set up an event that tracks when user has moved to page total / perPage > page and get another 20 (or move the range with startAt and endAt?)

Question here is, how may we deal with it in vuefire?

posva commented 7 years ago

I don't know how vue data tables work, but you if you can keep track of the index of the first element to display, you can unbind + bind at each hook, to get only the 10 (or 20) elements you want. If you need to offset an amount of element to make it work with the pagination, you can use a computed property to fake those items