Атрибути key дар Vue

Вақте ки Vue рӯйхати элементҳоро, ки бо директиваи v-for таҳия шудаанд, нав мекунад, стратегияи навсозии "дар ҷо" ба таври пешфарз истифода мешавад. Агар тартиби элементҳои массив ё объект тағир ёфт, Vue элементҳои DOM-ро ҷой намедиҳад, балки танҳо ҳар як элементро "дар ҷо" нав мекунад, то ки он дороиҳои навро дар индекси мувофиқ нишон диҳад.

Барои роҳнамоӣ кардани Vue, ки чӣ тавр идентификатсияи ҳар як элементро муайян кунад ва, аз ин рӯ, элементҳои мавҷударо боз-истифода ва тартиб диҳад, зарур аст, ки барои ҳар як элемент атрибути ягонаи key муайян карда шавад.

Бе калидҳо Vue алгоритмеро истифода мебарад, ки ҷойивазкунии элементҳоро ҳадди ақал мерасонад ва ҳаматарафа кӯшиш мекунад, ки элементҳои як навъро тағир диҳад/боз-истифода барад. Ҳангоми истифодаи калидҳо элементҳо мувофиқи тағироти тартиби пайравӣи калидҳо қайта тартиб дода мешаванд, ва элементҳое, ки калидҳои онҳо аллакай вуҷуд надоранд, ҳамеша ҳазф/нобуд мешаванд.

Тавсия дода мешавад, ки ҳамеша атрибути key бо v-for муайян карда шавад, ба истиснои ҳолатҳое, ки муҳтавои такроришавандаи DOM сода аст, ё вақте ки шумо ба стратегияи навсозии пешфарз барои беҳтар кардани иҷроиш такя мекунед.

Одатан, масъалаи илова кардани калидҳо дар вақти гузаронидани массив аз объектҳо ба миён меояд. Дар ин ҳолат як калидҳои объект ин майдони ягона аст, масалан, id:

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

Биёед массивҳои дар боло овардашударо бо давр такрор кунем, калидҳои мувофиқро муайян карда:

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

Массиви зеринро бо давр такрор кунед ва номҳои маҳсулотро дар шакли рӯйхати ul чоп кунед:

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