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 კომპონენტები. გააკეთეთ თითოეულ კომპონენტში ღილაკი მისი წაშლისთვის.