14

Author: kossiecoder

src/App.vue

@@ -30,7 +30,17 @@
       class="card mt-2"
     >
       <div class="card-body p-2">
-        {{ todo.subject }}
+        <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>
@@ -42,10 +52,7 @@ import { ref } from 'vue';
 export default {
   setup() {
     const todo = ref('');
-    const todos = ref([
-      {id: 1, subject: '휴대폰 사기'},
-      {id: 2, subject: '장보기'},
-    ]);
+    const todos = ref([]);
     const hasError = ref(false);
 
     const onSubmit = () => {
@@ -54,9 +61,11 @@ export default {
       } else {
         todos.value.push({
           id: Date.now(),
-          subject: todo.value
+          subject: todo.value,
+          completed: true,
         });
         hasError.value = false;
+        todo.value = '';
       }
     };