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

Давайте сделаем кнопку реактивного удаления элементов из списка. Приступим к реализации. Пусть у нас дан массив:

`data() { return { items: ['a', 'b', 'c', 'd', 'e'], } }`

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

`<template> <ul> <li v-for="(item, index) in items" :key="index"> {{ item }} </li> </ul> </template>`

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

`<template> <ul> <li v-for="(item, index) in items" :key="index"> {{ item }} <button @click="removeItem(index)">remove</button> </li> </ul> </template>`

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

`methods: { removeItem: function(index) { this.items.splice(index, 1); } }`

Дан массив. Выведите элементы этого массива в виде списка `ul`. Сделайте так, чтобы по нажатию на любую `li` она удалялась из списка.

←→
↑