Vue හි ප්‍රතික්‍රියාශීලී සංරචක ඉවත් කිරීම

ලැයිස්තුවකින් දරු සංරචක ප්‍රතික්‍රියාශීලීව ඉවත් කරන ආකාරය අපි ඉගෙන ගනිමු. මෙය සඳහා සෑම දරු සංරචකයකම විශේෂ බොත්තමක් සාදමු. මෙම බොත්තම ඔබා ඇති විට සිදුවීමක් නිකුත් කරන අතර, මව් සංරචකය තුළ නිශ්චිත දරු සංරචකයක් එහි id මගින් ඉවත් කරනු ලැබේ.

යෝජනා ක්‍රමය ක්‍රියාත්මක කිරීමට අපි පිවිසෙමු. මව් සංරචකය තුළ වස්තූන්ගේ පහත අරාව පවතින බව සිතමු:

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

මව් සංරචකය තුළ පරිශීලකයෙකු ඔහුගේ id අනුව ඉවත් කිරීමේ ක්‍රමයක් ලියමු:

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

අපි චක්‍රයක් තුළ සංරචක සාදමු, ඒවාට නම, අනුප්‍රාප්ති නාමය, id සහ ඉවත් කිරීමේ ක්‍රමය පරාමිතියක් ලෙස යොමු කරමු:

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

ඇතුල් වන දත්ත props සැකසුමේදී සහ නිකුත් කරන සිදුවීම emits සැකසුමේදී ලියන්න:

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

සංරචකයේ නිරූපණය තුළ පරිශීලකයාගේ නම සහ අනුප්‍රාප්ති නාමය ප්‍රදර්ශනය කරමු:

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

දැන් අපි බොත්තමක් සාදමු, එය ඔබා ඇති විට ඉවත් කිරීම සඳහා සිදුවීමක් නිකුත් කරනු ඇත. මෙම සිදුවීමේ පරාමිතියක් ලෙස සංරචකයේ id යොමු කරනු ලැබේ. සිදුවීම ලැබෙන විට මව් සංරචකය මෙම පරිශීලකයා වස්තූන්ගේ අරාවෙන් ඉවත් කරන අතර ඔහු ප්‍රතික්‍රියාශීලීව පරිශීලකයින්ගේ ලැයිස්තුවෙන් අතුරුදහන් වනු ඇත.

ඉතින්, අපි මෙම බොත්තම ක්‍රියාත්මක කරමු:

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

චක්‍රයක් තුළ Employee සංරචක ප්‍රදර්ශනය කරන්න. සෑම සංරචකයකම එය ඉවත් කිරීම සඳහා බොත්තමක් සාදන්න.