Knop voor verwijderen uit array van objecten in Vue

Laten we nu een knop implementeren om gegevens uit een array van objecten te verwijderen. Laten we beginnen met de implementatie. Stel dat we de volgende array hebben:

data() {
	return {
		users: [
			{
				id: 1,
				name: 'name1',
				surn: 'surn1',
			},
			{
				id: 2,
				name: 'name2',
				surn: 'surn2',
			},
			{
				id: 3,
				name: 'name3',
				surn: 'surn3',
			},
		]
	}
}

Laten we de inhoud van de array weergeven in de vorm van een lijst:

<template>
	<ul>
		<li v-for="user in users" :key="user.id">
			{{ user.name }}
			{{ user.surn }}
		</li>
	</ul>
</template>

Laten we in elk lijstitem een knop maken voor verwijderen. In deze knop koppelen we een methode, waarbij we als parameter het id van het array-element doorgeven dat we willen verwijderen:

<template>
	<ul>
		<li v-for="user in users" :key="user.id">
			{{ user.name }}
			{{ user.surn }}
			<button @click="removeItem(user.id)">remove</button>
		</li>
	</ul>
</template>

Laten we het verwijderen implementeren in de methode removeItem:

methods: {
	removeItem: function(id) {
		this.users = this.users.filter((user) => {
			return user.id !== id;
		})
	}
}

De volgende array met werknemersgegevens is gegeven:

data() {
	return {
		users: [
			{
				id: 1,
				name: 'name1',
				salary: 100,
				age: 30,
			},
			{
				id: 2,
				name: 'name2',
				salary: 200,
				age: 40,
			},
			{
				id: 3,
				name: 'name3',
				salary: 300,
				age: 50,
			},
		],
	}
}

Geef de werknemersgegevens weer in de vorm van een HTML-tabel. Maak een kolom met links om werknemers te verwijderen.