Iteriranje nizova u Vue

Vue omogućava formiranje tagova u petlji. To se radi uz pomoć posebne directive v-for. Pogledajmo kako ona radi za nizove. Za ovo napravimo sledeći niz:

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

Ispišimo svaki element ovog niza u zasebnom pasusu. Za ovo u predstavljanju (template) za početak napravimo pasus:

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

Sada napišimo našem pasusu directivu v-for. Vrednošću ove directive treba naznačiti ime niza koji se iterira i varijablu u koju će redom upadati elementi ovog niza. U našem slučaju ime niza će biti arr, a za varijablu ćemo smisliti ime elem:

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

Kao rezultat, naš pasus će se ponoviti onoliko puta koliko ima elemenata u našem nizu. Hajde da ispisujemo iterirane elemente u tekstu naših pasusa:

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

Neka u data bude sačuvan sledeći niz:

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

Ispišite svaki element ovog niza u svom tagu div.

Dat je sledeći niz:

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

Ispišite kvadrat svakog elementa ovog niza u svom tagu div.

Dat je sledeći niz:

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

Ispišite elemente ovog niza u vidu liste ul.