Копче за бришење на елемент од низа во 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 таа да се избрише од листата.