Atributi key në Vue

Gjatë përditësimit të listës së elementeve nga Vue, të renderuar me direktivën v-for, si parazgjedhje përdoret strategjia e përditësimit "në vend". Nëse rendi i elementeve të array ose objektit ndryshon, Vue nuk do të lëvizë elementët e DOM, thjesht do të përditësojë çdo element "në vend" në mënyrë që ai të shfaqë të dhënat e reja në indeksin përkatës.

Për t'i treguar Vue-s se si të përcaktojë identitetin e çdo elementi, dhe, në këtë mënyrë, të ripërdorë dhe të renditë elementët ekzistues, është e nevojshme të specifikohet atributi unik key për çdo element.

Pa çelësa, Vue përdor një algoritëm që minimizon lëvizjet e elementeve dhe do të përpiqet sa më shumë të ndryshojë/ripërdorë elementë të të njëjtit tip. Kur përdoren çelësa, elementët do të rirenditen në përputhje me ndryshimin e rendit të çelësave, ndërsa elementët, çelësat e të cilëve mungojnë, do të gjithmonë fshihen/shkatërrohen.

Rekomandohet që gjithmonë të specifikohet atributi key me v-for, përveç rasteve kur përmbajtja e përsëritur e DOM është e thjeshtë, ose kur me vetëdije mbështeteni në strategjinë e përditësimit si parazgjedhje për përmirësimin e performancës.

Në përgjithësi, çështja e shtimit të çelësave lind gjatë përsëritjes së një array objektesh. Në këtë rast, një nga çelësat e objektit është një fushë unike, për shembull, id:

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

Le të përsërisim array-n e dhënë me një cikël, duke specifikuar çelësat përkatës:

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

Përsërisni me cikël array-n e mëposhtme dhe shfaqni emrat e produkteve në formën e një liste ul:

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