# Реактивное удаление компонентов в 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`. Сделайте в каждом компоненте кнопку для его удаления.

← →
↑