Kurs Vue 3: renderowanie listy z v-for i kluczem :key

Karta produktu wyświetla listy: skład tkaniny, warianty kolorystyczne, opinie. Dyrektywa v-for powtarza element szablonu dla każdego wpisu w tablicy.

Pętla po zwykłej tablicy

Dodaj skład produktu do stanu:

<script setup>
import { ref } from 'vue'

const product = ref('T-Shirt')
const image = ref('/images/t-shirt-bleu.svg')
const inventory = ref(100)
const details = ref(['60 % coton', '30 % laine', '10 % polyester'])
</script>

A potem go wyświetl:

<ul>
  <li v-for="detail in details" :key="detail">{{ detail }}</li>
</ul>

Vue produkuje jeden <li> na wpis. W wyrażeniu detail in details details to tablica, a detail to alias bieżącego elementu, dostępny wszędzie wewnątrz powtarzanego elementu.

Pętla po obiektach

Warianty produktu to obiekty, z identyfikatorem i kolorem:

<script setup>
const variants = ref([
  { id: 2234, color: 'Bleu' },
  { id: 2235, color: 'Rouge' }
])
</script>

Do właściwości sięga się notacją z kropką:

<div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>

Indeks

Drugi parametr podaje pozycję w tablicy, liczoną od zera:

<li v-for="(detail, index) in details" :key="detail">
  {{ index + 1 }}. {{ detail }}
</li>

Rozdział 7 wykorzysta ten indeks, żeby wiedzieć, nad którym wariantem jest kursor.

Atrybut key

Pewnie zauważyłeś :key przy każdej pętli. To skrót od v-bind:key z rozdziału 2 i nie jest on ozdobnikiem.

Kiedy lista się zmienia, Vue porównuje starą wersję z nową, żeby zmienić tylko to, co konieczne. Bez stabilnego identyfikatora dopasowuje elementy po pozycji: jeśli wstawisz wpis na początek listy, uzna, że wszystkie elementy zmieniły treść, i przepisze je wszystkie.

Z unikalnym i stabilnym kluczem key rozpoznaje każdy element i tylko przesuwa to, co się przesunęło. To omija też klasyczny błąd: pole formularza albo zaznaczony checkbox, który po sortowaniu zostaje przypięty do niewłaściwego elementu.

Trzy reguły dla klucza:

• Unikalny w obrębie listy.
• Stabilny: ten sam wpis zachowuje ten sam klucz między renderowaniami.
• Nie indeks, chyba że lista nigdy się nie zmienia. Indeks zmienia się przy wstawianiu, usuwaniu i sortowaniu, czyli dokładnie tam, gdzie nie wolno na nim polegać.

Używaj identyfikatora ze swoich danych. Tutaj variant.id dla wariantów, a dla szczegółów sam łańcuch znaków, bo są unikalne.

<!-- ne fonctionne pas -->
<div v-for="variant in variants" v-if="variant.enStock">…</div>

<!-- fonctionne -->
<template v-for="variant in variants" :key="variant.id">
  <div v-if="variant.enStock">…</div>
</template>

Pętla po czymś innym niż tablica

v-for przyjmuje też obiekt, łańcuch znaków albo liczbę całkowitą:

<!-- objet : valeur, clé, index -->
<li v-for="(valeur, cle) in produit" :key="cle">{{ cle }} : {{ valeur }}</li>

<!-- nombre : de 1 à 5, pas de 0 à 4 -->
<span v-for="n in 5" :key="n">{{ n }}</span>