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 компоненттерін шығарыңыз. Әрбір компонентте оны жою үшін түйме жасаңыз.