Rendering Lists with v-for
Shelf's whole point is a list of books. You will not write one BookCard tag per book; the list grows and shrinks as people add and remove titles. v-for repeats an element once per item, and its key decides whether that list stays correct when it changes order.
The rule
v-for repeats;
:keygives each copy a stable identity.
<ul>
<li v-for="(book, index) in books" :key="book.id">
{{ index + 1 }}. {{ book.title }}
</li>
</ul>Reading the parts:
book in bookswalks the array;bookis available inside the element. The optional second name,index, is the position, starting at 0.- Objects can be looped too:
v-for="(value, key) in book"gives each property value and its name. - Numbers give a range:
v-for="n in 5"produces 1, 2, 3, 4, 5. It starts at 1, not 0. <template v-for>repeats a group of elements without a wrapper.:keymust be a unique, stable value per item, usually an id from your data.
Why the key matters. When the array changes, Vue compares old and new elements by key. Same key → same element, moved if needed. If you use the index as the key, sorting keeps keys 0, 1, 2 in place, so Vue reuses each element where it stands and just patches its text. Anything held inside, such as a half-typed note in an input or a component's own state, stays at the old position and ends up next to the wrong book.
v-if and v-for on one element. In Vue 3, v-if is evaluated first, so <li v-for="book in books" v-if="!book.read"> fails: book does not exist yet when v-if runs. Filter with a computed (unread) and loop over that, or put v-for on a <template> wrapper and v-if on the element inside.
The shortcut
Before writing a loop, answer two questions: "What am I looping over?" and "What makes each item unique?" The second answer is your key.
What am I looping over?
Only unread books, so make a computed:
const unread = computed(() => books.value.filter(b => !b.read)).
Drills
Answer fast — trust the rule.
What does <span v-for="n in 3">{{ n }}</span> render?
Which is the best key for a list of books from a database?
Cards are keyed by index. After sorting, a typed note appears on the wrong book. Why?
Why does <li v-for="b in books" v-if="!b.read"> fail in Vue 3?
Remember
v-for="(item, index) in items"repeats an element; ranges start at 1.- Shortcut: "what am I looping over, and what makes each item unique?" The answer to the second is the key.
- Trap: index keys on lists that reorder, and v-if with v-for on the same element.