Vue'da Reaktif Bileşen Silme

Listeden alt bileşenleri reaktif bir şekilde silmeyi öğrenelim. Bunun için her alt bileşende özel bir buton yapalım. Bu butona tıklandığında bir olay tetiklenecek ve ana bileşende belirli bir alt bileşen, onun id değerine göre silinecek.

Uygulamaya geçelim. Ana bileşende aşağıdaki nesne dizisi bulunsun:

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

Ana bileşende, kullanıcıyı id değerine göre silen bir metot yazalım:

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

Bileşenleri bir döngü içinde oluşturalım, onlara parametre olarak adı, soyadı, id ve silme metodunu ileterek:

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

Gelen verileri props yapılandırmasında ve tetiklenen olayı emits yapılandırmasında tanımlayalım:

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

Bileşenin şablonunda kullanıcının adını ve soyadını gösterelim:

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

Şimdi, tıklandığında silme işlemi için bir olay tetikleyen bir buton yapalım. Bu olayın parametresi olarak bileşenin id değeri iletilecek. Ana bileşen, olayı aldığında ilgili kullanıcıyı nesne dizisinden silecek ve o, kullanıcı listesinden reaktif bir şekilde kaybolacak.

Şimdi, bu butonu uygulayalım:

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

Bir döngü içinde Employee bileşenlerini gösterin. Her bileşende, onu silmek için bir buton yapın.