Iteriranje skozi polja v Vue

Vue omogoča oblikovanje oznak v zanki. To naredimo s posebno direktivo v-for. Poglejmo, kako deluje za polja. Za to pripravimo naslednje polje:

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

Izpišimo vsak element tega polja v svojem odstavku. Za to v predstavitvi za začetek naredimo odstavek:

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

Zdaj našemu odstavku dodajmo direktivo v-for. Kot vrednost te direktive navedemo ime prebiranega polja in spremenljivko, v katero bodo zaporedoma prihajali elementi tega polja. V našem primeru bo ime polja arr, za spremenljivko pa si izmislimo ime elem:

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

Kot rezultat se bo naš odstavek ponovil tolikokrat, kolikor je elementov v našem polju. Izpišimo prebrane elemente v besedilu naših odstavkov:

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

Naj v data hrani naslednje polje:

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

Izpišite vsak element tega polja v svoji oznaki div.

Dano je naslednje polje:

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

Izpišite kvadrat vsakega elementa tega polja v svoji oznaki div.

Dano je naslednje polje:

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

Izpišite elemente tega polja v obliki seznama ul.