Procházení polí ve Vue

Vue umožňuje vytvářet tagy v cyklu. To se dělá pomocí speciální direktivy v-for. Podívejme se, jak funguje pro pole. K tomu si vytvořme následující pole:

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

Vypišme každý prvek tohoto pole v samostatném odstavci. K tomu nejprve vytvořme v reprezentaci odstavec:

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

Nyní našemu odstavci napíšeme directivu v-for. Hodnotou této direktivy je třeba uvést název procházeného pole a proměnnou, do které postupně budou padat prvky tohoto pole. V našem případě bude název pole arr, a pro proměnnou vymyslíme název elem:

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

V důsledku toho se náš odstavec zopakuje tolikrát, kolik je prvků v našem poli. Vypisujme procházené prvky v textu našich odstavců:

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

Nechť v data je uloženo následující pole:

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

Vypište každý prvek tohoto pole ve vlastním tagu div.

Je dáno následující pole:

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

Vypište druhou mocninu každého prvku tohoto pole ve vlastním tagu div.

Je dáno následující pole:

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

Vypište prvky tohoto pole ve formě seznamu ul.