[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!

[mahsarajabpour]

I have the same issue.

[wangjianweiwei]

I use a component to render multiple different list pages, and I have implemented a reset like function in this way

let infiniteLoad = null

const Load = async ({done}) => {
  if (!infiniteLoad) {
    infiniteLoad = done
  }

  if (isLastPage.value) {
    done("empty")

  } else {
    done("loading")
    page.value++
    await fetchTodos()
    done("ok")
  }
}

async function fetchTodos(reset) {
  if (reset) {
    tasks.splice(0, tasks.length);
    page.value = 1
    isLastPage.value = false
    infiniteLoad("ok")  // This is the key point
  }
  let todos = await getTodos(page.value, size.value, selectedFilter.value.status, selectedFilter.value.date())
  tasks.push(...todos.paged)

  if (todos.page_count <= page.value) {
    isLastPage.value = true
  }
}

[alihdev]

@hessam72

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

You can also use the key property:

<VInfiniteScroll
   :key="key" 
   ...
/>

Change the key if you need to reset the component.

[ashkanfathi]

You can also use the key property:

@hessam72

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

You can also use the key property:

<VInfiniteScroll :key="key" ... /> Change the key if you need to reset the component.

This answer was great