# 13. Todo - Update (상태)

## 목표

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

### 실습

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

![](/files/-LjLbGpJ0TTr4d4UmM_N)

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

```javascript
// 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 에서 사용됩니다.

```javascript
// 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 이라는 함수를 추가해보겠습니다.

```javascript
// Todo.vue 

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

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

```javascript
// 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>

```

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

![](/files/-LjLdV76Orf5EBP_oxUA)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://simplevue.gitbook.io/intro/13.-todo-update.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.