Vuetify: [Feature Request] Server side pagination for v-autocomplete/v-select (loading more items on scroll)

[ricardovanlaarhoven]

V-select and V-autocomplete load more items on scroll, this only loads more items into the HTML, but the items prop has to be filled already. It would be nice to be able to load this from the server.

What problem does this feature solve?

Some API's endpoints are paginated, for now when i have an autocomplete i add a parameter like perPage=10000 to API request parameters so everything works, except this is really slow.

What is your proposed solution?

Add a prop which indicates if you want to use server side pagination, when the onScroll method from v-select at this point it raises the this.lastItem, it should fire an event which then can load x more items from the server.

[ricardovanlaarhoven]

When i had this issue i created a PR which fixed my issue.
Some time past since then.
My PR was closed "Unfortunately this is not functionality that we are looking to implement at this time."
And i have had some contact with @johnleider

He told me that there are ways to do this with the current functionality. And i think this is the right place to show the people who are struggling with this can find the solution.

Could anyone who knows the solution post it here?
At this point i request 10.000's of items from the api whithout pagination as a dirty bugfix

[johnleider]

This is what I was referring to: https://vuetifyjs.com/en/components/selects#example-slots

[massimolavermicocca]

Hi, any news on this subject yet? Is there a workaround to implement it using current vuetify release?

[kanteankit]

@massimolavermicocca
You can use the append slot to add a button/menu-item to the end of the dropdown, that says Load More. When user clicks on it, you can make an API call to fetch more data and push it to the list

[massimolavermicocca]

@kanteankit Could you please provide a sandbox with that? the append slot seems to draw object next to the autocomplete itself.
Example: https://codepen.io/anon/pen/omZNgo?editors=1010

[KaelWD]

He means append-item

[tyteen4a03]

Bumping this - are there any workarounds right now?

[NothingWeAre]

This solution somewat buggy.
When added items count reach multipliers of 20 new items does not show, until user tries to scroll up.
This is related to the internal value of lastItem

[ricardovanlaarhoven]

@tyteen4a03 It is possible with the append-item mentioned by @KaelWD but i prefer a more build-in solution by vuetify like the PR i've made.
Because i think this is an issue which multiple users have and if everyone has to build an own way in the v-select/v-autocomplete. That's a waste of time.

Or perhaps someone could create a plugin for this but then that has to be maintained to and checked after every new vuetify version update.

[ebuychance]

:+1: to adding this feature or creating a new component.

[lorenzomorandini]

This seems quite an important feature. We have multiple paginated APIs that have to handle a lot of data. Loading all of them on page load would slow down the entire page.

[RobbinBaauw]

I don't see the problem with the PR, and I'm willing to port it to the new version of the component. The workarounds described here (e.g. creating a "load more" button) are a worse solution than automatic calculations of when to retrieve new records. The best way to do those calculation is in the component definition itself (and part of these calculations already happen). The "only" thing that would need to happen is to call a method instead of increasing "lastItem" right?

[ricardovanlaarhoven]

In my opinion that's correct @RobbinBaauw
I hope the vuetify team agrees with your statement!

[AyushiBShah]

Any workaround for this time being ?

[villeneuve-michael]

I'd like to still show interest for this feature request. In terms of UX it's the Load More idea is a terrible compared to the PR that was mentioned previously in this thread.

[ThomasKientz]

I have a simple solution for vuetify v1, see the repo : https://github.com/ThomasKientz/vuetify-v1-autocomplete-infinite-scroll

I have used the append-item slot with the vue-observe-visibility's directive.

Then I am calling this.$refs.autocomplete.onScroll(); to force a refresh of the list otherwise you have to scroll up then down again to render the new items.

[HamletLeon]

I have a simple solution for vuetify v1, see the repo : https://github.com/ThomasKientz/vuetify-v1-autocomplete-infinite-scroll

I have used the append-item slot with the vue-observe-visibility's directive.

Then I am calling this.$refs.autocomplete.onScroll(); to force a refresh of the list otherwise you have to scroll up then down again to render the new items.

I see that now with https://vuetifyjs.com/en/components/lazy/#usage is possible to simulate the same aproach tha you proposal. 🤔

[ThomasKientz]

@HamletLeon Nop, v-lazy "will not render its contents until it has been intersected". So It will work only for the first load, not the next ones. But https://vuetifyjs.com/en/directives/intersect/ can replace vue-observe-visibility. Above solution works for v2 as well. Do you have troubles make it work ?

[HamletLeon]

@HamletLeon Nop, v-lazy "will not render its contents until it has been intersected". So It will work only for the first load, not the next ones. But https://vuetifyjs.com/en/directives/intersect/ can replace vue-observe-visibility. Above solution works for v2 as well. Do you have troubles make it work ?

I'm just testing, i can use v-lazy if just i set the boolean "...Active" to false after getting next "page" and re-rendering...

And it works, just is necessary to watch the changes of v-model of lazy and identify the last page of api to hide this append item when no items and last page.

[yoelpc4]

@NothingWeAre

This solution somewat buggy.
When added items count reach multipliers of 20 new items does not show, until user tries to scroll up.
This is related to the internal value of lastItem

Hey I just realized we are experiencing the same issue in "This solution somewat buggy. When added items count reach multipliers of 20 new items does not show, until user tries to scroll up".

So I came up with a solution to load 15 items each request, that could solve this issue.

[KaelWD]

new items does not show until user tries to scroll up

This has been fixed in d9bb128a5