Αντικειμενική Διαγραφή Στοιχείων στο Vue

Ας μάθουμε πώς να διαγράφουμε αντικειμενικά θυγατρικά στοιχεία από μια λίστα. Για να το κάνουμε αυτό, θα φτιάξουμε σε κάθε θυγατρικό στοιχείο ένα ειδικό κουμπί. Πατώντας σε αυτό το κουμπί θα εκπέμπεται ένα συμβάν και στο γονικό στοιχείο θα διαγράφεται το καθορισμένο θυγατρικό στοιχείο μέσω του id του.

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

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

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

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

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

<template>
	<User
		v-for   ="user in users"
		
		:id     ="user.id"
		:name   ="user.name"
		:surn   ="user.surn"
		@remove ="remove"
		:key    ="user.id"
	/>
</template>

Ας ορίσουμε τα εισερχόμενα δεδομένα στη ρύθμιση props και το εκπεμπόμενο συμβάν στη ρύθμιση emits:

props: {
	id:     Number,
	name:   String,
	surn:   String,
},
emits: ['remove'],

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

<template>
	{{ name }}
	{{ surn }}
</template>

Και τώρα ας φτιάξουμε ένα κουμπί, upon clicking στο οποίο θα εκπέμπεται ένα συμβάν για διαγραφή. Παράμετρος αυτού του συμβάντος θα είναι το id του στοιχείου. Το γονικό στοιχείο upon receiving του συμβάντος θα διαγράψει αυτόν τον χρήστη από τον πίνακα αντικειμένων και αυτός θα εξαφανιστεί αντικειμενικά από τη λίστα των χρηστών.

Λοιπόν, ας υλοποιήσουμε αυτό το κουμπί:

<template>
	{{ name }}
	{{ surn }}
	
	<button @click="$emit('remove', id)">
		remove
	</button>
</template>

Εμφανίστε σε βρόχο τα στοιχεία Employee. Φτιάξτε σε κάθε στοιχείο ένα κουμπί για τη διαγραφή του.