Schaltfläche zum Löschen eines Array-Elements in Vue

Lassen Sie uns eine Schaltfläche für das reaktive Löschen von Elementen aus einer Liste erstellen. Beginnen wir mit der Implementierung. Nehmen wir an, wir haben das folgende Array:

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

Lassen Sie uns den Inhalt des Arrays als Liste ausgeben:

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

Erstellen wir in jedem Listeneintrag eine Schaltfläche zum Löschen. In dieser Schaltfläche binden wir eine Methode, an die wir als Parameter den Index des Array-Elements übergeben, das wir löschen möchten:

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

Implementieren wir das Löschen in der Methode removeItem:

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

Gegeben ist ein Array. Geben Sie die Elemente dieses Arrays als ul-Liste aus. Sorgen Sie dafür, dass beim Klick auf ein beliebiges li dieses aus der Liste gelöscht wird.