Iterowanie po tablicach w Vue

Vue pozwala generować tagi w pętli. Robimy to za pomocą specjalnej dyrektywy v-for. Spójrzmy, jak działa ona dla tablic. W tym celu utwórzmy następującą tablicę:

data() {
	return {
		arr: ['a', 'b', 'c'],
	}
}

Wyświetlmy każdy element tej tablicy w osobnym akapicie. Aby to zrobić, w widoku na początek utwórzmy akapit:

<template>
	<p></p>
</template>

Teraj napiszmy dla naszego akapitu dyrektywę v-for. Jako wartość tej dyrektywy należy podać nazwę iterowanej tablicy oraz zmienną, do której kolejno będą trafiać elementy tej tablicy. W naszym przypadku nazwa tablicy to arr, a dla zmiennej wymyślmy nazwę elem:

<template>
	<p v-for="elem in arr"></p>
</template>

W rezultacie nasz akapit powtórzy się tyle razy, ile elementów znajduje się w naszej tablicy. Wyświetlajmy iterowane elementy w tekście naszych akapitów:

<template>
	<p v-for="elem in arr">{{ elem }}</p>
</template>

Niech w data przechowywana jest następująca tablica:

data() {
	return {
		items: [1, 2, 3, 4, 5],
	}
}

Wyświetl każdy element tej tablicy w swoim własnym tagu div.

Dana jest następująca tablica:

data() {
	return {
		items: [1, 2, 3, 4, 5],
	}
}

Wyświetl kwadrat każdego elementu tej tablicy w swoim własnym tagu div.

Dana jest następująca tablica:

data() {
	return {
		items: [1, 2, 3, 4, 5],
	}
}

Wyświetl elementy tej tablicy w postaci listy ul.