Vue 배열 이용한 체크박스 바인딩

Vue 사용하면서 배열 처리하는 부분이 생각보다 간단해서 깜짝 놀랐어요. 편하게 데이터를 바인딩하고 수정할 수도 있네요. 

체크박스를 표시하기 위해서 input type 이 checkbox인것을 추가했습니다. v-model에 배열 요소인 todo.completed를 연결하는 것이 포인트입니다. todos에 데이터를 push 하는 경우 기본값으로 false가 들어가도록 합니다. 

특별한 로직을 넣지 않았는데 체크박스 동작하는 부분이 신기하네요.

<template>
  <div class="container">
    <h2>TO DO</h2>    
    <form 
      @submit.prevent="onAdd"
      class="d-flex"
    >
      <div class="flex-grow-1 mr-1">
        <input 
          class="form-control" 
          type="text"
          v-model="todo"
          placeholder="할일을 입력하세요."
        />
      </div>
      <div>
        <button
          class="btn btn-primary"
          type="submit"          
        >
          추가
        </button>
      </div>
    </form>    
    <div v-show="errorMessage!==''" class="card mt-10">
      <div class="card-body p-2">
        {{ errorMessage }}
      </div>
    </div>
    <div
      v-for="todo in todos"
      :key="todo.id"      
      class="card mt-10"
    >
      <div class="card-body p-2">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" v-model="todo.completed"/>
          <label class="form-check-label">
            {{ todo.subject }}
          </label>
        </div>
      </div>
    </div>
  </div>  
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    
    const todo = ref("")
    const todos = ref([])
    const errorMessage = ref("")

    const onAdd = () => {      
      if(todo.value === ''){
        errorMessage.value = "아무것도 입력하지 않았습니다."       
      } else {
          todos.value.push({
            id: Date.now(),
            completed: false,
            subject: todo.value
          })
          todo.value = ""
          errorMessage.value = ""
        }
      }

    return {
      todo,
      todos,
      errorMessage,
      onAdd
    }
  }
}
</script>