vue-typed-virtual-list icon indicating copy to clipboard operation
vue-typed-virtual-list copied to clipboard

scrollTo doesn't seem to work with dynamically added list items

Open linkurzweg opened this issue 8 months ago • 0 comments

Hello! First of all thanks a lot for creating this component :)

The list itself seems to work great, but I can't get the scrollTo method to work. I'm fetching data from an API and adding the fetched items dynamically to the list. My code looks like this currently:

<template>
  <div class="list">
    <VirtualScroller ref="scroller" :default-size="170" :items="searchResult?.items ?? []" :padding="20">
      <template #item="{ ref: searchResultItem }">
        <ListItem :item="searchResultItem!" />
      </template>
    </VirtualScroller>
    <p v-if="indexValid">
      <button
        type="button"
        aria-label="Load more search results"
        @click="fetchNextPage"
      >
        {{ $t('show-more') }}
      </button>
    </p>
  </div>
  <template v-if="isLoading && !searchResult?.items?.length">
    <Loader />
  </template>
</template>

<script setup lang="ts">
  import { ListItem, Loader } from '@/components'
  import { useStore } from '@/store'
  import { storeToRefs } from 'pinia'
  import { computed, ref, watch } from 'vue'
  import { createVirtualScroller } from 'vue-typed-virtual-list'
  import { InternalQueryResultItemDto } from '@/models'

  const VirtualScroller = createVirtualScroller<InternalQueryResultItemDto>()

  const store = useStore()
  const { searchResult, isLoading } = storeToRefs(store)

  type VirtualListInstance = InstanceType<typeof VirtualScroller>
  const scroller = ref<VirtualListInstance | null>(null)

  const indexValid = computed(() => {
    if (typeof searchResult.value?.page === 'number' && typeof searchResult.value?.pageCount === 'number') {
      return searchResult.value?.page < searchResult.value?.pageCount - 1
    }

    return false
  })

  const fetchNextPage = () => {
    if (typeof searchResult.value?.page === 'number') {
      store.fetchAndUpdateSearchResult(searchResult.value?.page + 1, 10, true)
      scroller.value?.scrollTo((searchResult.value?.page + 1) * 10 + 1)
    }
  }
</script>

linkurzweg avatar Oct 25 '23 09:10 linkurzweg