Knoppie om uit skik van objekte in Vue te verwyder

Laat ons nou 'n knoppie implementeer om data uit 'n skik van objekte te verwyder. Kom ons begin met die implementering. Gestel daar is die volgende skik:

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

Laat ons die inhoud van die skik toon in die vorm van 'n lys:

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

Laat ons in elke lyspunt 'n knoppie maak vir verwydering. In hierdie knoppie sal ons 'n metode koppel, waarvan ons die id van die skik element as parameter sal stuur, wat ons gaan verwyder:

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

Laat ons die verwydering in die metode removeItem implementeer:

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

Die volgende skik met werknemersdata word gegee:

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

Vertoon die werknemersdata in die vorm van 'n HTML-tabel. Maak 'n kolom met skakels om werknemers te verwyder.