Κουμπί για διαγραφή στοιχείου πίνακα στο 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 να διαγράφεται από τη λίστα.