Knop vir die verwydering van 'n skikking element in Vue

Kom ons maak 'n knop vir die reaktiewe verwydering van items uit 'n lys. Kom ons begin met die implementering. Laat ons aanneem ons het die volgende skikking:

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

Laat ons die inhoud van die skikking uitskakel in die vorm van 'n lys:

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

Kom ons maak 'n knop in elke lysitem om te verwyder. In hierdie knop sal ons 'n metode koppel, waarvan ons die parameter sal stuur as die nommer van die skikkingelement wat ons gaan verwyder:

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

Kom ons implementeer die verwydering in die metode removeItem:

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

Daar is 'n skikking. Vertoon die elemente van hierdie skikking in die vorm van 'n ul-lys. Maak dit so dat met 'n klik op enige li dit verwyder word uit die lys.