Manually trigger infinite

[timoteiNicsoft]

I'm working in Vue 3, and I'm trying to manually trigger the infinite scroll because on small screens, the loader is larger than the screen, so the infinite scroll doesn't render only when scrolling down to the bottom of the page.

I've tried this:

<InfiniteLoading :identifier="infiniteId" @infinite="infiniteProceduresHandler" :firstload="false" ref="infiniteLoadingRef">
     <template #complete><span></span></template>
     <template #spinner><span></span></template>
</InfiniteLoading>

<script setup lang="ts">

onMounted(async () => {
         await nextTick(() => {
             infiniteLoadingRef.value?.$emit('infinite', infiniteLoadingRef.value.stateChanger);
         });
});
</script>

the problem is that in the infiniteProceduresHandler function it does not recognize $state.

[timoteiNicsoft]

Hi,

I tried using infiniteLoadingRef.value.$emit('infinite') but I still get the same error. It shows that it doesn’t recognize $state.

[jTiKey]

@timoteiNicsoft hey, I deleted my answer because it wasn't working correctly.
You can save the state from the initial load function but then it will stop working once you do that if you use the complete command, then it won't load anymore.

[timoteiNicsoft]

But I don’t have the initial state because, on small screens, the loader template is larger than the page, and I need to trigger it manually; otherwise, the loader stays on the entire page.

It used to work before, but now, with the Vue 3 version, it no longer works.

[jTiKey]

vuetify has an infinite scroller that has a manual mode, you could try that one.

[GMolini]

I honestly cant understand why there is a prop for firsload=false but then we cant trigger manually the first load. Just In case its helpful for anyone, my problem was that the data being presented to the loader was really being fetched in a store in another part of the application. But I wanted only to show the first n elements and then load them on the screen using the infinite loader.

The problem was that, on page reload, the component mounted before the data had been fetched, so it would display no results. My 'hack' was to make a function to wait for data to be there

    const waitForDataArray = () => {
      return new Promise((resolve) => {

        if (data_array.value.length > 0) {
          resolve();
        }
        const unwatch = watch(data_array, (newVal) => {
          if (newVal.length > 0) {
            unwatch(); // Stop watching once the condition is met
            resolve();
          }
        });
      });
    };

Then in the async load function you can just use await waitForDataArray. If you are navigating through the app and data is already in the array, it will automatically continue and resolve the promise. If not, it will wait until it has been fetched

[hardik-baraiya-123456]

templet

<InfiniteLoading @infinite="load" :identifier="infiniteId">
<template #complete>

    // script
    
    const infiniteId = ref(+new Date()); // It will generate a random value based on current time
    
    // show apply filter
  const applyFilter = () =>{
      page.value = 1;
      list_data.value = [];
      infiniteId.value += 1;
  }