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

Ten wpis jest 5 częścią z 8 w kursie Vue.js

Pisząc aplikacje w Vue.js bardzo często bedziesz 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.

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>

See the Pen v-for by Wojciech Urbański (@wojtiku) on CodePen.

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>

See the Pen v-for z indeksem by Wojciech Urbański (@wojtiku) on CodePen.

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. Naucz się Vue.js na szkoleniu z Type of Web!

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(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>

See the Pen v-for na obiekcie by Wojciech Urbański (@wojtiku) on CodePen.

Ć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.

See the Pen v-for – zadanie by Wojciech Urbański (@wojtiku) on CodePen.

Nie wysyłamy spamu, tylko wartościowe informacje. W każdej chwili możesz się wypisać klikając „wypisz się” w stopce maila.

Subscribe
Powiadom o
guest
5 komentarzy
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Mateusz Stepaniuk
Mateusz Stepaniuk
1 rok temu

Bardzo fajna seria postów o Vue, ale przy tym brakuje mi zaznaczenia kilku detali. Mam na myśli wspomniany przez @tomasz_sochacki:disqus key oraz nieużywanie v-if a jednym elemencie z v-for co jest bardzo częstym błędem.

wojtiku
wojtiku
2 lat temu

Bardzo dobra uwaga jeśli chodzi o atrybut key. Na ten moment pominąłem go świadomie. Kurs staram się pisać „od podstaw” i ten temat pojawi się później.

Jeśli chodzi o v-for z v-if. Kiedyś był to błąd, a obecnie priorytet jest jasno ustalony. Gdy oba występują na elemencie, to v-if dotyczy pojedynczej iteracji. Postaram się dziś uzupełnić wpis o tę informację bo to bardzo dobra uwaga. Dzięki!

Sylwia Fait
Sylwia Fait
1 rok temu

Rozwiązanie ćwiczenia: https://codepen.io/sfait/pen/PBPRVg

Tomasz Sochacki
1 rok temu

Duży plusik za fajne serie o frameworkach front-endowych. Aktualnie co prawda pracuję głównie w Angular ale śledzę sobie na bieżąco Twoje wpisy o React i teraz Vue. Zrodziło mi się tylko po dzisiejszym poście takie pytanko czy w Vue występuje coś na wzór key w React czy trackBy w Angular ?

Mateusz Stepaniuk
Mateusz Stepaniuk
2 lat temu