Knap til sletning af array-element i Vue

Lad os lave en knap til reaktiv sletning af elementer fra en liste. Lad os gå i gang med implementeringen. Lad os antage, at vi har et array:

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

Lad os udskrive indholdet af arrayet som en liste:

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

Lad os lave en knap til sletning i hvert listepunkt. I denne knap binder vi en metode, hvor vi som parameter sender indekset for det array-element, vi er ved at slette:

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

Lad os implementere sletningen i metoden removeItem:

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

Der er givet et array. Udskriv elementerne i dette array som en liste ul. Gør sådan, at ved at klikke på en hvilken som helst li bliver den slettet fra listen.