-import { ref, computed, onMounted, type VNodeRef } from 'vue'
-import { useWindowVirtualizer, useVirtualizer } from '@tanstack/vue-virtual'
-import { generateData, generateColumns } from './utils'
+import { computed, onMounted, onUpdated, ref, shallowRef } from 'vue'
+import { useVirtualizer, useWindowVirtualizer } from '@tanstack/vue-virtual'
+import { generateColumns, generateData } from './utils'
const columns = generateColumns(30)
const data = generateData(columns)
@@ -103,13 +103,14 @@ const width = computed(() => {
: [0, 0]
})
-const measureElement = (el) => {
- if (!el) {
- return
- }
-
- rowVirtualizer.value.measureElement(el)
+const virtualItemEls = shallowRef([])
- return undefined
+function measureAll() {
+ virtualItemEls.value.forEach((el) => {
+ if (el) rowVirtualizer.value.measureElement(el)
+ })
}
+
+onMounted(measureAll)
+onUpdated(measureAll)
diff --git a/examples/vue/dynamic/src/components/RowVirtualizerDynamic.vue b/examples/vue/dynamic/src/components/RowVirtualizerDynamic.vue
index 97bd7538d..564a67591 100644
--- a/examples/vue/dynamic/src/components/RowVirtualizerDynamic.vue
+++ b/examples/vue/dynamic/src/components/RowVirtualizerDynamic.vue
@@ -35,7 +35,7 @@
v-for="virtualRow in virtualRows"
:key="virtualRow.key"
:data-index="virtualRow.index"
- :ref="measureElement"
+ ref="virtualItemEls"
:class="virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'"
>
@@ -50,7 +50,7 @@
diff --git a/examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue b/examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue
index cb95e1474..8a6ec9350 100644
--- a/examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue
+++ b/examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue
@@ -22,7 +22,7 @@
v-for="virtualRow in virtualRows"
:key="virtualRow.key"
:data-index="virtualRow.index"
- :ref="measureElement"
+ ref="virtualItemEls"
:class="virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'"
>
@@ -36,7 +36,7 @@