typescript - PrimeVue 4 VirtualScroller Lazy Loading - Issue with API Calls - Stack Overflow

admin管理员组

文章数量:1318140

I'm trying to implement a virtual scroller (initially I wanted a Select component with virtual scrolling lazy but I simplified it to try to make it works) to display a list of project (id, name, customer). I have a Project endpoint which is working fine with DataTable with lazy pagination but I can't figure out how to correctly implement the virtual scroller.

Here is my code:

<script setup lang="ts">
import type { Project } from '@/core/interfaces'
import { projectService } from '@/core/services'
import type { VirtualScrollerLazyEvent } from 'primevue'
import { ref, type Ref } from 'vue'

const items: Ref<Project[]> = ref(Array.from({ length: 1000 }))
const loading: Ref<boolean> = ref(false)

const onLazyLoad = (event: VirtualScrollerLazyEvent) => {
  console.log('onLazyLoad', event, items.value.length)
  fetchItems(event.first, event.last)
}

const fetchItems = async (first: number, last: number) => {
  loading.value = true
  const skip: string = first.toString()
  const limit: string = last.toString()
  const params = new URLSearchParams({ skip, limit })
  const res = await projectService.getLazyList(params)
  items.value = res.projects
  loading.value = false
}
</script>

<template>
  <VirtualScroller :items="items" :itemSize="20" :loading="loading" :onLazyLoad="onLazyLoad" lazy showLoader
    :delay="250" :appendOnly="true" :autoSize="true" :style="{ width: '200px', height: '400px' }">
    <template v-slot:item="{ item }">
      <div style="height: 40px">{{ item?.id }}</div>
    </template>
  </VirtualScroller>
</template>

It's only works when limit = last + first but it result to load more and more data in each call and it's not a good thing. I can't figure out what is badly implemented...

本文标签： typescriptPrimeVue 4 VirtualScroller Lazy LoadingIssue with API CallsStack Overflow