vue-typed-virtual-list
vue-typed-virtual-list copied to clipboard
scrollTo doesn't seem to work with dynamically added list items
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>