Përsëritja e vargjeve në Vue

Vue lejon formimin e etiketave në cikël. Kjo bëhet duke përdorur directivën speciale v-for. Le të shohim, si funksionon ajo për vargjet. Për këtë le të krijojmë vargun e mëposhtëm:

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

Le të shfaqim çdo element të këtij vargu në një paragraf të veçantë. Për këtë në pamje për fillim le të krijojmë një paragraf:

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

Tani le t'i shkruajmë paragrafit tonë directivën v-for. Si vlerë të kësaj direktive duhet të tregohet emri i vargut që do të përsëritet dhe ndryshorja, në të cilën në mënyrë të njëpasnjëshme do të futen elementët e këtij vargu. Në rastin tonë emri i vargut do të jetë arr, ndërsa për ndryshoren ne do të zgjedhim emrin elem:

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

Si rezultat paragrafi ynë do të përsëritet sa herë ka elementë në vargun tonë. Le të shfaqim elementët e përsëritur në tekstin e paragrafëve tanë:

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

Le të ruhet në data vargu i mëposhtëm:

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

Shfaqni çdo element të këtij vargu në etiketën e vet div.

Është dhënë vargu i mëposhtëm:

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

Shfaqni katrorin e çdo elementi të këtij vargu në etiketën e vet div.

Është dhënë vargu i mëposhtëm:

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

Shfaqni elementët e këtij vargu në formën e një liste ul.