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.