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 테이블 형태로 출력하세요. 직원을 삭제할 수 있는 링크가 있는 열을 만드세요.