Vue-dä komponentleri reaksiýaly aýyrmak

Geliň, çaga komponentleri sanawdan reaksiýaly aýyrmagy öwreneliň. Bunuň üçin her bir çaga komponentde ýörite düwmä ýasaýarys. Bu düwmä basylanynda bir waka çykaryljak we ata komponentde berlen çaga komponent onuň id-sy boýunça aýyryljak.

Geliň amala aşyrmaga başlalyň. Ata komponentde aşakdaky jisimler ýygyndysy bolsun:

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

Ata komponentde ulanyjyny onuň id-sy boýunça aýyrmak üçin usul ýazaýalyň:

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

Komponentleri aýlawda döredeliň, olara ady, familiýasy, id-sy we aýyrmak üçin usuly parametr hökmünde bereliň:

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

Gelýän maglumatlary props sazlanyşynda we çykarylýan wakany emits sazlanyşynda görkezeliň:

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

Komponentiň görkezilisinde ulanyjynyň ady we familiýasyny çykaralyň:

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

Indi bolsa, basylanynda aýyrmak üçin waka çykarylýan bir düwme ýasaýalyň. Bu wakanyň parametri hökmünde komponentiň id-si iberiler. Ata komponent waka alanynda berlen ulanyjyny jisimler ýygyndysyndan aýyrar we ol ulanyjylar sanawyndan reaksiýaly ýogalar.

Şeýlelik bilen, bu düwmeni amala aşyralyň:

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

Aýlawda Employee komponentlerini çykaryň. Her bir komponentde ony aýyrmak üçin düwme ýasaň.