Atribut key di Vue

Saat Vue memperbarui daftar elemen, yang dirender dengan direktif v-for, secara default strategi pembaruan "in-place" digunakan. Jika urutan elemen array atau objek berubah, Vue tidak akan memindahkan elemen DOM, melainkan hanya memperbarui setiap elemen "di tempat" untuk menampilkan data baru pada indeks yang sesuai.

Untuk memberi tahu Vue cara mengidentifikasi setiap elemen, dan dengan demikian menggunakan kembali dan mengurutkan elemen yang ada, perlu ditentukan atribut unik key untuk setiap elemen.

Tanpa kunci, Vue menggunakan algoritma yang meminimalkan perpindahan elemen dan akan berusaha semaksimal mungkin untuk mengubah/menggunakan kembali elemen dari tipe yang sama. Dengan menggunakan kunci, elemen akan diurutkan ulang sesuai dengan perubahan urutan kunci, dan elemen yang kuncinya sudah tidak ada akan selalu dihapus/dihancurkan.

Disarankan untuk selalu menentukan atribut key dengan v-for, kecuali ketika konten yang diiterasi DOM sederhana, atau ketika secara sengaja mengandalkan strategi pembaruan default untuk meningkatkan kinerja.

Umumnya pertanyaan tentang menambahkan kunci muncul saat mengiterasi array objek. Dalam hal ini salah satu kunci dari objek adalah bidang yang unik, misalnya, id:

data() {
	return {
		users: [
			{
				id: 1,
				name: 'name1',
				surn: 'surn1',
			},
			{
				id: 2,
				name: 'name2',
				surn: 'surn2',
			},
			{
				id: 3,
				name: 'name3',
				surn: 'surn3',
			},
		]
	}
}

Mari kita iterasi array yang diberikan dengan loop, dengan menentukan kunci yang sesuai:

<template>
	<p v-for="user in users" :key="user.id">
		{{ user.name }}
		{{ user.surn }}
	</p>
</template>

Iterasikan array berikut dengan loop dan tampilkan nama produk dalam bentuk daftar ul:

data() {
	return {
		products: [
			{
				id: 1,
				name: 'product1',
			},
			{
				id: 2,
				name: 'product2',
			},
			{
				id: 3,
				name: 'product3',
			},
		]
	}
}