Реактивно изтриване на компоненти във 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. Направете във всеки компонент бутон за неговото изтриване.