Lists by position

Sometimes rows belong to positions rather than items: a leaderboard's first place, or a fixed set of slots whose contents change. For with keyed={false} keeps each row at its position and updates what it shows:

<For each={cats()} keyed={false}>
{(cat, index) => (
<li>
{index + 1}: {cat().name}
</li>
)}
</For>

The callback's arguments swap roles: cat is now a getter, because the item at a position can change, and index is a plain number, because the row never moves.

Try it: render the list with keyed={false}, again with a note input in each row. Type a note in the first row and rotate. This time the note stays in first place while the cats move through it.

Loading editor…