Vue 배열 요소 삭제 버튼

목록에서 요소를 반응형으로 삭제하는 버튼을 만들어 봅시다. 구현을 시작해 보겠습니다. 다음과 같은 배열이 주어져 있다고 가정합니다:

data() {
	return {
		items: ['a', 'b', 'c', 'd', 'e'],
	}
}

배열 내용을 목록 형태로 출력해 봅시다:

<template>
	<ul>
		<li v-for="(item, index) in items" :key="index">
			{{ item }}
		</li>
	</ul>
</template>

목록의 각 항목에 삭제 버튼을 만들어 봅시다. 이 버튼에 메서드를 바인딩하고, 파라미터로 삭제하려는 배열 요소의 인덱스를 전달하겠습니다:

<template>
	<ul>
		<li v-for="(item, index) in items" :key="index">
			{{ item }}
			<button @click="removeItem(index)">remove</button>
		</li>
	</ul>
</template>

removeItem 메서드에서 삭제를 구현해 봅시다:

methods: {
	removeItem: function(index) {
		this.items.splice(index, 1);
	}
}

배열이 주어져 있습니다. 이 배열의 요소들을 ul 목록 형태로 출력하세요. 아무 li를 클릭하면 목록에서 삭제되도록 만드세요.