목표
선택된 Todo 를 삭제합니다.
실습
추가된 todo 에 마우스를 올려보시면 x 버튼을 확인 할 수 있습니다.
이 버튼이 눌렸을 경우 해당 todo 를 삭제해야합니다.
삭제를 하기 위해서는 한가지 알아야되는 정보가 있는데 해당 todo 의 고유한 구분 값 입니다.
우리는 그 구분값을 만들어주기 위해 date 를 이용했습니다.
각 todo 에는 고유한 id 값을 가지고 있고 해당 todo 가 선택되었을 경우 그 값을 이용하여 삭제를 합니다.
Create 와 마찬가지로 모든 리스트 데이터를 가지고 있는 App.vue 에 함수를 추가합니다.
remove 함수는 매우 심플합니다. 선택된 id 를 받아 그 id 와 같지 않은 todo 들만 filter 해주면됩니다.
// App.vue
methods: {
insertTodo(text) {
// ...
},
removeTodo(id) {
this.todos = this.todos.filter(todo => todo.id !== id);
}
}
removeTodo 의 경우 리스트를 그려주는 Todo.vue 에서 이용하고자 합니다.
// App.vue
<template>
<div id="app">
<section class="todoapp">
<Header @insertTodo="insertTodo" />
<Todo :todos="todos" @removeTodo="removeTodo" />
<Footer />
</section>
</div>
</template>
Todo.vue 에서는 해당 이벤트를 이용하여 선택된 id 값만 넘겨주면됩니다.
클릭된 id 값을 받아 emit 해줄 handleRemove 함수를 추가하겠습니다.
// Todo.vue
export default {
props: {
todos: { type: Array, default: () => [] }
},
methods: {
handleRemove(id) {
this.$emit("removeTodo", id);
}
}
};
x 버튼이 눌렸을때 눌린 todo 의 id 를 handleRemove 에게 넘겨 줄 수 있도록 click event 를 걸어줍니다.
<template>
<section class="main">
<ul class="todo-list">
<li
:class="{todo: true, completed: isDone }"
v-for="({ id, text, isDone }) in todos"
:key="id"
>
<div class="view">
<input class="toggle" type="checkbox" :checked="isDone" />
<label>{{ text }}</label>
<button class="destroy" @click="handleRemove(id)"></button>
</div>
<input class="edit" type="text" />
</li>
</ul>
</section>
</template>
선택된 todo 가 삭제되는 것을 확인 할 수 있습니다.
