Butoni për fshirjen nga një grup objektesh në Vue

Tani le të implementojmë një buton për të fshirë të dhënat nga një grup objektesh. Le të fillojmë implementimin. Le të themi se kemi grupin e mëposhtëm:

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

Le të shfaqim përmbajtjen e grupit në formën e një liste:

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

Le të bëjmë në çdo element të listës një buton për fshirje. Në këtë buton do të lidhim metodën, parametrin e së cilës do ta kalojmë id të elementit të grupit që kemi ndërmend ta fshijmë:

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

Le të implementojmë fshirjen në metodën removeItem:

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

Është dhënë grupi i mëposhtëm me të dhëna të punonjësve:

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

Shfaqni të dhënat e punonjësve në formën e një tabele HTML. Bëni një kolonë me lidhje për fshirjen e punonjësve.