Buton pentru ștergerea unui element din matrice în Vue

Să creăm un buton pentru ștergerea reactivă a elementelor dintr-o listă. Să începem implementarea. Să presupunem că avem o matrice:

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

Să afișăm conținutul matricei sub formă de listă:

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

Să creăm în fiecare element al listei un buton pentru ștergere. În acest buton vom lega o metodă, al cărei parametru îl vom transmite indexul elementului matricei pe care îl intendem să ștergem:

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

Să implementăm ștergerea în metoda removeItem:

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

Este dată o matrice. Afișați elementele acestei matrice sub formă de listă ul. Faceți astfel încât la click pe orice li aceasta să fie ștearsă din listă.