Atribut key u Vue

Prilikom ažuriranja Vue liste elemenata, prikazanih direktivom v-for, podrazumevano se koristi strategija ažuriranja "na mestu". Ako se redosled elemenata niza ili objekta promeni, Vue neće pomerati DOM elemente, već će jednostavno ažurirati svaki element "na mestu", kako bi prikazao nove podatke za odgovarajući indeks.

Da biste Vue-u dali do znanja kako da utvrdi identitet svakog elementa, i na taj način ponovo koristi i uredi postojeće elemente, potrebno je da navedete jedinstveni atribut key za svaki element.

Bez ključeva Vue koristi algoritam koji minimizuje pomeranje elemenata i će maksimalno nastojati da menja/ponovo koristi elemente istog tipa. Kada se koriste ključevi, elementi će se preuređivati u skladu sa promenom redosleda ključeva, a elementi čiji ključevi više nisu prisutni, biće uvek uklonjeni/uništeni.

Preporučuje se da uvek navedete atribut key uz v-for, osim u slučajevima kada je iterativni sadržaj jednostavan, ili kada se svesno oslanjate na podrazumevanu strategiju ažuriranja radi poboljšanja performansi.

U principu pitanje dodavanja ključeva postaje relevantno pri iteraciji kroz niz objekata. U ovom slučaju jedan od ključeva objekta je jedinstveno polje, na primer, id:

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

Hajde da prođemo kroz dati niz petljom, navodeći odgovarajuće ključeve:

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

Prođite kroz sledeći niz petljom i prikažite nazive proizvoda u vidu liste ul:

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