Prechádzanie polí vo Vue

Vue umožňuje vytvárať značky v cykle. To sa robí pomocou špeciálnej direktívy v-for. Pozrime sa, ako funguje pre polia. Na to si vytvorme nasledujúce pole:

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

Vypíšme každý prvok tohto poľa v samostatnom odseku. Na to v šablóne na začiatok vytvorme odsek:

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

Teraz napíšme nášmu odseku direktívu v-for. Hodnotou tejto direktívy treba uviesť názov prechádzaného poľa a premennú, do ktorej postupne budú prichádzať prvky tohto poľa. V našom prípade bude názov poľa arr, a pre premennú vymyslíme názov elem:

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

Výsledkom bude, že náš odsek sa zopakuje tolkokrát, koľko prvkov je v našom poli. Vypisujme prechádzané prvky v texte našich odsekov:

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

Nech v data je uložené nasledujúce pole:

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

Vypíšte každý prvok tohto poľa vo svojej značke div.

Dané je nasledujúce pole:

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

Vypíšte druhú mocninu každého prvku tohto poľa vo svojej značke div.

Dané je nasledujúce pole:

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

Vypíšte prvky tohto poľa ako zoznam ul.