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

Ten wpis jest 5 częścią z 5 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.

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.