Iterasi Array di Vue

Vue memungkinkan untuk membuat tag dalam loop. Ini dilakukan dengan menggunakan direktif khusus v-for. Mari kita lihat, bagaimana cara kerjanya untuk array. Untuk itu, mari buat array berikut:

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

Mari tampilkan setiap elemen array ini dalam paragraf terpisah. Untuk itu, dalam template pertama-tama buatlah sebuah paragraf:

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

Sekarang tuliskan direktif v-for pada paragraf kita. Nilai direktif ini harus menunjuk pada nama array yang diiterasi dan variabel, yang secara berurutan akan menampung elemen dari array tersebut. Dalam kasus kita, nama arraynya adalah arr, dan untuk variabelnya kita akan buat nama elem:

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

Hasilnya, paragraf kita akan berulang sebanyak elemen yang ada dalam array kita. Mari kita tampilkan elemen yang diiterasi dalam teks paragraf kita:

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

Misalkan dalam data disimpan array berikut:

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

Tampilkan setiap elemen dari array ini dalam tag div-nya sendiri.

Diberikan array berikut:

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

Tampilkan kuadrat dari setiap elemen array ini dalam tag div-nya sendiri.

Diberikan array berikut:

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

Tampilkan elemen dari array ini dalam bentuk daftar ul.