Дар 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-ро дар сикл чоп кунед. Дар ҳар як компонент тугма барои нест кардани он созед.