How to reload infinite-scroller?

[q962]

When the server data is updated, how can I reload to get the latest data?

[frederikheld]

Depends on your server. If you're using Firebase, you can set up snapshot listeners that get notified when the data changes. If you built your own REST API, you might either poll the endpoint in regular intervals (not recommended if you have a lot of users and need to poll a lot) or have the endpoint set up a websocket that sends a notification about the update (which essentially is what Firebase does).

[q962]

I would like to ask about the solution for manual refresh.

I use VInfiniteScroll with PullToRefresh, and it will reload when you pull down to refresh.

It is best to call a function to complete this task.

Currently, :key is used to solve this problem.

[q962]

Like YouTube, pull down to refresh to get new content

[frederikheld]

I know what you want to do.

But what is this?

It is best to call a function to complete this task.

Currently, :key is used to solve this problem.

What does it mean?

You can use the @load event to call a function that sends request to your backend to get new data. But you have to use your own logic to decide which data to load.

But if I understand correctly, infinite scroll is not the issue here. If you're asking about pull-to-refresh, you're looking for a different mechanism to trigger the request. Infinite scroll triggers the load when you reach the end of the list. Pull to refresh is something else.

Vuetify does not have a pull-to-refresh component. Ionic has one, maybe you can re-use this? https://ionicframework.com/docs/api/refresher

[q962]

Pull-to-refresh is not the point. You can also set pull-to-refresh as a button.

The point is how the infinite scroll changes its state.
Currently, it only changes to loading when the user manually scrolls to the edge.

status is not a prop and there is no method to change the state.

:key: https://vuejs.org/api/built-in-special-attributes.html#key

By binding the key attribute, when the key attribute value changes, the component's lifecycle hook will be triggered, resulting in the loading event being triggered.

This achieves the purpose of reloading

[frederikheld]

Do you need to put the scroller in loading state? Loading state is just a visual feedback to the user who scrolled to the edge. If they did pull to refresh, the pull to refresh component shows the loading state, no need to show it in the infinite scroller as well.

For the data: IIRC you just render the list you have. If the list changes, the components get updated/added. As long as they keep their unique key, Vue reactivity system will take care of it.

[jacstrong]

@frederikheld I think what @q962 is trying to ask is how to manually refresh the infinite scroller.

I'm having a similar issue where occasionally I will filter the items via a search which involves removing all the items and replacing them with new ones from the server. Like @q962 I currently have to change the infinite scroller's :key value. Otherwise if it had reached the end of the items it stalls out and will never load any more.

It would be nice to have some way to let it know that new items are available even if done('empty') was previously called, currently the workaround is to change the :key.