12. Todo - Remove

간단한 Todo App 을 만들어봅니다.

목표

선택된 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 가 삭제되는 것을 확인 할 수 있습니다.