13. Todo - Update (상태)

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

목표

선택된 Todo 의 상태를 업데이트합니다.

실습

각 Todo 아이템들에는 isDone 이라는 상태 값이 있습니다. 이 값은 Todo 가 완료된 상태인지 아닌지를 나타냅니다.

먼저 선택된 Todo 의 id 를 받아 상태를 업데이는 하는 함수를 추가하겠습니다. 이 또한 todos 를 가지고 있는 App.vue 에 추가됩니다.

// App.vue

export default {
  // ...
  methods: {
    insertTodo(text) { // ... }
    removeTodo(id) { // ... },
    updateDone(id) {
      const todos = [...this.todos];
      const todo = todos.find(todo => todo.id === id);

      if (todo) {
        todo.isDone = !todo.isDone;
        this.todos = todos;
      }
    }
  }
};

Array 의 find 함수를 모르신다면 아래 링크를 참고해주세요https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find

이 함수는 Todo.vue 에서 사용됩니다.

// App.vue

<template>
  <div id="app">
    <section class="todoapp">
      <Header @insertTodo="insertTodo" />
      <Todo :todos="todos" @removeTodo="removeTodo" @updateDone="updateDone" />
      <Footer />
    </section>
  </div>
</template>

이제 Todo.vue 에서 해당 이벤트를 이용하여 상태를 업데이트 해보겠습니다. 먼저 id 를 넘겨받아 이벤트를 실행시켜줄 handleDone 이라는 함수를 추가해보겠습니다.

// Todo.vue 

<script>
export default {
  props: {
    todos: { type: Array, default: () => [] }
  },
  methods: {
    handleRemove(id) { // ... },
    handleDone(id) {
      this.$emit("updateDone", id);
    }
  }
};
</script>

그리고 실제 체크박스가 선택되었을때 handleDone 을 실행시키도록 추가하여줍니다.

// Todo.vue 

<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" @click="handleDone(id)" />
          <label>{{ text }}</label>
          <button class="destroy" @click="handleRemove(id)"></button>
        </div>
        <input class="edit" type="text" />
      </li>
    </ul>
  </section>
</template>

위처럼 코드를 추가해주시면 아래와 같이 체크가 되면 상태가 업데이트 되는 것을 확인 할 수 있습니다.