Тугма барои нест кардан аз массиви объектҳо дар 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 баронед. Сутуни бо истинодҳо барои нест кардани кормандон созед.