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.