Schaltfläche zum Entfernen aus einem Objektarray in Vue

Lassen Sie uns nun eine Schaltfläche implementieren, um Daten aus einem Array von Objekten zu entfernen. Beginnen wir mit der Implementierung. Nehmen wir das folgende Array an:

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

Lassen wir den Inhalt des Arrays in Form einer Liste ausgeben:

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

Erstellen wir in jedem Listeneintrag eine Schaltfläche zum Entfernen. In dieser Schaltfläche binden wir eine Methode, an die wir als Parameter die id des Array-Elements übergeben, das wir entfernen möchten:

<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>

Implementieren wir das Entfernen in der Methode removeItem:

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

Gegeben ist das folgende Array mit Mitarbeiterdaten:

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,
			},
		],
	}
}

Geben Sie die Mitarbeiterdaten in Form einer HTML-Tabelle aus. Erstellen Sie eine Spalte mit Links zum Entfernen von Mitarbeitern.