Reaktyvus komponentų pašalinimas Vue

Išmokime reaktyviai pašalinti vaikinius komponentus iš sąrašo. Kiekviename vaikiniame komponente sukurkime specialų mygtuką. Paspaudus šį mygtuką bus išskiriamas įvykis ir pagrindiniame komponente bus pašalinamas nurodytas vaikinis komponentas pagal jo id.

Pradėkime įgyvendinimą. Tegul pagrindiniame komponente yra toks objektų masyvas:

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

Pagrindiniame komponente parašykime naudotojo pašalinimo metodą pagal jo id:

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

Sukurkime komponentus cikle, perduodant jiems parametrą vardą, pavardę, id ir pašalinimo metodą:

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

Nurodykime gaunamus duomenis props nustatyme ir išskiriamą įvykį emits nustatyme:

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

Komponento vaizde atvaizduokime naudotojo vardą ir pavardę:

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

Dabar sukurkime mygtuką, kurį paspaudus bus išskiriamas pašalinimo įvykis. Šio įvykio parametru bus perduodamas komponento id. Pagrindinis komponentas gavęs įvykį pašalins šį naudotoją iš objektų masyvo ir jis reaktyviai dings iš naudotojų sąrašo.

Taigi, įgyvendinkime šį mygtuką:

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

Atvaizduokite cikle komponentus Employee. Kiekviename komponente sukurkite mygtuką jo pašalinimui.