Vue တွင် key attribute

Vue သည် v-for directive ဖြင့် render လုပ်ထားသော element စာရင်းတစ်ခုကို update လုပ်သည့်အခါ၊ default အနေဖြင့် "in-place" update ဗျူဟာကို အသုံးပြုသည်။ Array သို့မဟုတ် object ၏ element အစဉ်လိုက် ပြောင်းလဲသွားပါက၊ Vue သည် DOM element များကို ရွှေ့မည်မဟုတ်ဘဲ၊ သက်ဆိုင်ရာ index အလိုက် ဒေတာအသစ်များကို ပြသရန် element တစ်ခုချင်းစီကို "နေရာတကျ" ပြင်ဆင်မွမ်းမံမည်ဖြစ်သည်။

Element တစ်ခုချင်းစီ၏ ကိုယ်ပိုင်လက္ခဏာကို Vue အား မည်သို့သတ်မှတ်ရမည်၊ ထို့ကြောင့် ရှိပြီးသော element များကို ပြန်လည်အသုံးပြုခြင်းနှင့် အစဉ်လိုက်စီစဉ်ခြင်းတို့အတွက် ညွှန်ကြားရန်၊ element တစ်ခုချင်းစီအတွက် ထူးခြားသော key attribute ကို သတ်မှတ်ပေးရန် လိုအပ်ပါသည်။

Key များမရှိပါက၊ Vue သည် element များရွှေ့လျားမှုကို အနည်းဆုံးဖြစ်အောင်လုပ်သည့် algorithm ကို အသုံးပြုပြီး၊ တူညီသောအမျိုးအစားရှိ element များကို အများဆုံး ပြောင်းလဲ/ပြန်လည်အသုံးပြုရန် ကြိုးစားမည်ဖြစ်သည်။ Key များကို အသုံးပြုသည့်အခါ၊ element များကို key များ၏ အစဉ်လိုက်ပြောင်းလဲမှုနှင့်အညီ ပြန်လည်စီစဉ်ပေးမည်ဖြစ်ပြီး၊ ၎င်းတို့၏ key များ မရှိတော့သော element များကို အမြဲတမ်း ဖယ်ရှား/ဖျက်စီးမည်ဖြစ်သည်။

DOM ၏ iterate လုပ်သည့် အကြောင်းအရာသည် ရိုးရှင်းနေသည့်အချိန်များ သို့မဟုတ် စွမ်းဆောင်ရည်မြှင့်တင်ရန်အတွက် default update ဗျူဟာအပေါ် သတိပြု၍ အားထားသည့်အချိန်များမှလွဲ၍ v-for နှင့်အတူ key attribute ကို အမြဲညွှန်ကြားရန် အကြံပြုထားပါသည်။

ယေဘူယျအားဖြင့် key များထည့်သွင်းရန် မေးခွန်းထုတ်သည့်အခါမှာ object array ကို လှည့်ပတ်သည့်အခါတွင် ဖြစ်ပေါ်လာတတ်သည်။ ဤကိစ္စတွင် object ၏ key များထဲမှ တစ်ခုမှာ ထူးခြားသော field တစ်ခုဖြစ်ပြီး၊ ဥပမာ id ဖြစ်သည်။

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

ဖော်ပြထားသော array ကို loop ဖြင့်လှည့်ပတ်ကြပြီး၊ သက်ဆိုင်ရာ key များကို သတ်မှတ်ပေးကြပါစို့။

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

အောက်ပါ array ကို loop ဖြင့်လှည့်ပတ်ပြီး၊ ထုတ်ကုန်အမည်များကို ul စာရင်း၏ပုံစံဖြင့် ထုတ်ပြပါ။

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