[Feature Request] VInfiniteScroll - reset method?

[mrrrk]

Problem to solve

When my component loads for the first time, VInfiniteScroll calls onLoad and loads the first page - and then subsequent pages as scrolling occurs. So far so good but if the underlying result-set changes, e.g., through altered search parameters or whatever, there does not seem to be a method of having VInfiniteScroll call onLoad once more to start showing a fresh set of results.

Proposed solution

I can hack the behavior I want by caching the done() callback in the onLoad handler and calling it later with "ok" when I want to nudge the VInfiniteScroll component into action again. This seems a bit of a fragile way to go though, so a method I could call from a reference to the component would seem more satisfactory.

const infiniteScroll = ref<typeof VInfiniteScroll>();
// ... new search...
items.value = [];
infiniteScroll.value.reset(); // <-- what I want :-)

Thanks!

[hessam72]

Can you provide an example of your "proposed solution" please? I have the exact same problem!

[mrrrk]

Can you provide an example of your "proposed solution" please? I have the exact same problem!

You mean my 'hack'? My code looks a bit like this:

<v-infinite-scroll :onLoad="loadPage">

// ...

const items = ref([]);
let currentPage = 1;
let doneCallback = null;

const loadPage = async (args) => {
    const response = await getApiData(currentPage, etc);
    // do stuff with results, increment currentPage, call done, whatever...
    doneCallback = args.done; // save the function for later!
}

const refreshResults = () => {
    items.value = [];
    currentPage  = 1; // get API to search from beginning
    if (doneCallback !== null) doneCallback("ok"); // call saved function to trigger another API call
};

...or you could use v-if to hide then show the component to force it to refresh.

...or you could use the vue-infinite-loading component - which actually supports the required behaviour and might be the solution I stick with for now!