TanStack / virtual

🤖 Headless UI for Virtualizing Large Element Lists in JS/TS, React, Solid, Vue and Svelte
https://tanstack.com/virtual
MIT License
5.42k stars 293 forks source link

Vue - adding bigint to Key broke :key bindings #819

Open kouts opened 1 month ago

kouts commented 1 month ago

Describe the bug

The recent change to VirtualItem.Key breaks the :key bindings in v-for loops.

Example:

Image

Your minimal, reproducible example

https://github.com/tanstack/virtual/tree/main/examples/

Steps to reproduce

Setup a virtualizer that uses a key that's not the index e.g.

const rowVirtualizer = useVirtualizer(
  computed(() => {
    return {
      count: props.items.length,
      getScrollElement: () => virtualizerRef.value,
      getItemKey: (index) => props.items[index].id, // <--- id here is string 
      estimateSize: () => 64,
      overscan: 10,
      debug: false,
    };
  })
);

Expected behavior

As a user I expected the :key bindings to not break in Vue v-for loops.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOS, Linux

tanstack-virtual version

3.10.6

TypeScript version

5.5.4

Additional context

No response

Terms & Code of Conduct