Vue တွင် Component များကို Reactively ဖျက်ခြင်း

Child component များကို list ထဲမှ reactively ဖျက်ရန် သင်ယူကြပါစို့။ ဤအတွက် child component တစ်ခုစီတွင် အထူး ခလုတ်တစ်ခု ပြုလုပ်ပါမည်။ ထိုခလုတ်ကို နှိပ်သည့်အခါ event ထုတ်လွှတ်ပြီး parent component တွင် သတ်မှတ်ထားသော child component ကို ၎င်း၏ id အရ ဖျက်ပစ်မည်ဖြစ်သည်။

အကောင်အထည်ဖော်ခြင်းကို စတင်ပါမည်။ Parent component တွင် အောက်ပါ object array ရှိသည်ဆိုပါစို့။

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

Parent component တွင် ၎င်း၏ id အရ user ကိုဖျက်ရန် method ကို ရေးပါမည်။

methods: {
	remove(id) {
		this.users = this.users.filter((user) => {
			return user.id !== id;
		})
	}
}

Component များကို loop ပတ်ကာ၊ ၎င်းတို့အား parameter အဖြစ် နာမည်၊ မျိုးနွယ်အမည်၊ id နှင့် ဖျက်ရန် method ကို ပေးပို့ပါမည်။

<template>
	<User
		v-for   ="user in users"
		
		:id     ="user.id"
		:name   ="user.name"
		:surn   ="user.surn"
		@remove ="remove"
		:key    ="user.id"
	/>
</template>

props setting အတွင်း ဝင်လာသောဒေတာများနှင့် emits setting အတွင်း ထုတ်လွှတ်မည့် event များကို သတ်မှတ်ပါမည်။

props: {
	id:     Number,
	name:   String,
	surn:   String,
},
emits: ['remove'],

Component ၏ template ထဲတွင် user ၏ နာမည်နှင့် မျိုးနွယ်အမည်ကို ထုတ်ပြပါမည်။

<template>
	{{ name }}
	{{ surn }}
</template>

ယခု နှိပ်လိုက်သည့်အခါ ဖျက်ရန် event ကို ထုတ်လွှတ်မည့် ခလုတ်တစ်ခု ပြုလုပ်ပါမည်။ ထို event ၏ parameter အဖြစ် component ၏ id ကို ပေးပို့ပါမည်။ Parent component သည် event ကိုလက်ခံရရှိသောအခါ ထို user အား object array ထဲမှ ဖျက်ပစ်မည်ဖြစ်ပြီး ၎င်းသည် user list ထဲမှ reactively ပျောက်ကွယ်သွားမည်ဖြစ်သည်။

ထို့ကြောင့် ဤခလုတ်ကို အကောင်အထည်ဖော်ကြပါစို့။

<template>
	{{ name }}
	{{ surn }}
	
	<button @click="$emit('remove', id)">
		remove
	</button>
</template>

Employee component များကို loop ဖြင့် ထုတ်ပြပါ။ Component တစ်ခုစီတွင် ၎င်းကိုဖျက်ရန် ခလုတ်တစ်ခု ပြုလုပ်ပါ။