Reaktivno odstranjevanje komponent v Vue

Naucimo se reaktivno odstranjevati podrejene komponente iz seznama. Za to naredimo v vsaki podrejeni komponenti poseben gumb. Ob kliku na ta gumb se bo sprožil dogodek in v nadrejeni komponenti bo odstranjena določena podrejena komponenta po njenem id.

Pristopimo k implementaciji. Naj bo v nadrejeni komponenti podan naslednji seznam objektov:

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

Zapišimo v nadrejeni komponenti metodo za odstranjevanje uporabnika po njegovem id:

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

Ustvarimo komponente v zanki, tako da jim posredujemo parameter ime, priimek, id in metodo za odstranjevanje:

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

Določimo vhodne podatke v nastavitvi props in sproženi dogodek v nastavitvi emits:

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

Prikažimo v predstavitvi komponente ime in priimek uporabnika:

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

Zdaj pa naredimo gumb, ob kliku na katerega se bo sprožil dogodek za odstranjevanje. Parameter tega dogodka bo posredoval id komponente. Nadrejena komponenta ob prejemu dogodka bo odstranila tega uporabnika iz seznama objektov in ta bo reaktivno izginil iz seznama uporabnikov.

Torej, implementirajmo ta gumb:

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

Prikažite v zanki komponente Employee. Naredite v vsaki komponenti gumb za njeno odstranjevanje.