Копче за бришење од низа од објекти во 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)">бриши</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 табела. Направете колона со линкови за бришење на вработените.