Skocz do treści

Pętle w Vue.js z użyciem dyrektywy v-for

91

Pisząc aplikacje w Vue.js bardzo często będziesz chciał(a) wyświetlić listę elementów w pętli na podstawie tablicy. Właśnie w tym celu "język szablonów" wbudowany w Vue.js udostępnia dyrektywę v-for. W najprostszej postaci odpowiada ona pętli for znanej z JavaScriptu.

Ten artykuł jest częścią 5 z 8 w serii Vue.js.

Zdjęcie Wojtek Urbański
Opinie3 komentarze

Wyświetlanie listy przy użyciu dyrektywy v-for

Dyrektywa v-for używa specjalnej składni aktualnyElementy in tablicaZDanymi gdzie tablicaZDanymi jest... źródłową tablicą z danymi, a aktualnyElementy jest swego rodzaju zmienną lokalną wskazującą na aktualny element tablicy. Możesz to zobaczyć na poniższym przykładzie:

new Vue({
  data() {
    return {
      fruits: ['Apple', 'Pear', 'Plum', 'Banana'],
    };
  },
}).$mount('#app');
<ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul>

Dostęp do indeksu elementu

Wewnątrz pętli v-for możesz też korzystać z indeksu elementu, który właśnie jest iterowany. Składnia zmienia wtedy formę na (element, index) in tablica. Oto przykład:

new Vue({
  data() {
    return {
      prefix: 'I <3',
      fruits: ['Apple', 'Pear', 'Plum', 'Banana'],
    };
  },
}).$mount('#app');
<div id="app">
  <div v-for="(fruit, index) in fruits">{{ index }} - {{ prefix }} {{ fruit }}</div>
</div>

Zwróć też uwagę na fakt, że wewnątrz pętli v-for, oprócz nowych zmiennych, masz normalny dostęp do wszystkich pól danych znajdujących się na instancji Vue. W powyższym przykładzie w każdej iteracji odnoszę się do pola prefix. zapisz się na szkolenie z Vue.js.

Pętla v-for na obiekcie

Vue pozwala iterować nie tylko po tablicach, ale również obiektach. W swojej standardowej formie value in someObject pod value podstawione zostaną kolejne wartości pól obiektu. Możesz dostać się też do kluczy obiektu oraz indeksów za pomocą odpowiednio (value, key) in someObject i (value, key, index) in someObject. Tak wygląda to w akcji:

new Vue({
  data() {
    return {
      fruits: {
        Apple: 4,
        Pear: 3,
        Plum: 5,
        Banana: 2,
      },
    };
  },
}).$mount('#app');
<div id="app">
  <div v-for="(quantity, fruit, index) in fruits">{{ index }}. {{ quantity }}x {{ fruit }}</div>
</div>

Ćwiczenie

Świetnie - wiesz już jak działa pętla v-for w Vue.js! Użyj tej wiedzy aby wyświetlić zagnieżdżoną listę, albo inaczej mówiąc listę list. Możesz posłużyć się poniższym Code Penem. Zdefiniowałem tam listę kategorii, a w każdej z kategorii listę produktów. Po prostu kliknij "edit on CodePen" i do dzieła! Nie zapomnij zamieścić swojego rozwiązania w komentarzu.

👉  Znalazłeś/aś błąd?  👈
Edytuj ten wpis na GitHubie!

Autor