# Кнопка для удаления из массива объектов в Vue

Давайте теперь реализуем кнопку для удаления данных из массива объектов. Приступим к реализации. Пусть есть следующий массив:

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

Выведем содержимое массива в виде списка:

`<template> <ul> <li v-for="user in users" :key="user.id"> {{ user.name }} {{ user.surn }} </li> </ul> </template>`

Сделаем в каждом пункте списка кнопку для удаления. В этой кнопке привяжем метод, параметром которого будем передавать `id` элемента массива, которого мы собираемся удалить:

`<template> <ul> <li v-for="user in users" :key="user.id"> {{ user.name }} {{ user.surn }} <button @click="removeItem(user.id)">remove</button> </li> </ul> </template>`

Реализуем удаление в методе `removeItem`:

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

Дан следующий массив с данными работников:

`data() { return { users: [ { id: 1, name: 'name1', salary: 100, age: 30, }, { id: 2, name: 'name2', salary: 200, age: 40, }, { id: 3, name: 'name3', salary: 300, age: 50, }, ], } }`

Выведите данные работников в виде HTML таблицы. Сделайте колонку с ссылками для удаления работников.

←→
↑