Taulukoiden iterointi Vue:ssa

Vue sallii tagien muodostamisen silmukassa. Tämä tehdään erityisellä v-for-direktiivillä. Katsotaan, kuinka se toimii taulukoille. Tehdään tätä varten seuraava taulukko:

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

Esitetään jokainen tämän taulukon elementti omassa kappaleessaan. Tätä varten tehdään näkymään aluksi kappale:

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

Kirjoitetaan nyt kappaleellemme v-for-direktiivin. Tämän direktiivin arvoksi tulee määrittää iteroitavan taulukon nimi ja muttuja, johon peräkkäin tulevat tämän taulukon alkiot. Meidän tapauksessamme taulukon nimi on arr, ja muuttujalle keksimme nimen elem:

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

Tuloksena kappaleemme toistuu niin monta kertaa kuin taulukossamme on alkioita. Esitetään iteroidut alkiot kappaleidemme tekstissä:

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

Olkoon data:ssa tallennettuna seuraava taulukko:

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

Esitä kukin tämän taulukon alkio omassa div-tagissaan.

Annettu seuraava taulukko:

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

Esitä kunkin alkion neliö tästä taulukosta omassa div-tagissaan.

Annettu seuraava taulukko:

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

Esitä tämän taulukon alkiot listana ul.