Κουμπί για διαγραφή από πίνακα αντικειμένων στο Vue

Ας υλοποιήσουμε τώρα ένα κουμπί για διαγραφή δεδομένων από έναν πίνακα αντικειμένων. Ας προχωρήσουμε στην υλοποίηση. Ας υποθέσουμε ότι υπάρχει ο ακόλουθος πίνακας:

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

Ας εμφανίσουμε τα περιεχόμενα του πίνακα με τη μορφή μιας λίστας:

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

Ας φτιάξουμε σε κάθε στοιχείο της λίστας ένα κουμπί για διαγραφή. Σε αυτό το κουμπί θα δέσουμε μια μέθοδο, της οποίας θα μεταβιβάζουμε ως παράμετρο το id του στοιχείου του πίνακα που πρόκειται να διαγράψουμε:

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

Ας υλοποιήσουμε τη διαγραφή στη μέθοδο removeItem:

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

Δίνεται ο ακόλουθος πίνακας με δεδομένα εργαζομένων:

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

Εμφανίστε τα δεδομένα των εργαζομένων σε μορφή πίνακα HTML. Δημιουργήστε μια στήλη με συνδέσμους για τη διαγραφή εργαζομένων.