15

Author: kossiecoder

src/App.vue

@@ -36,7 +36,10 @@
             type="checkbox"
             v-model="todo.completed"
           >
-          <label class="form-check-label">
+          <label 
+            class="form-check-label"
+            :class="{ todo: todo.completed }"
+          >
             {{ todo.subject }}
           </label>
         </div>
@@ -54,6 +57,10 @@ export default {
     const todo = ref('');
     const todos = ref([]);
     const hasError = ref(false);
+    const todoStyle = {
+      textDecoration: 'line-through',
+      color: 'gray'
+    };
 
     const onSubmit = () => {
       if (todo.value === '') {
@@ -62,7 +69,7 @@ export default {
         todos.value.push({
           id: Date.now(),
           subject: todo.value,
-          completed: true,
+          completed: false,
         });
         hasError.value = false;
         todo.value = '';
@@ -74,13 +81,15 @@ export default {
       todos,
       onSubmit,
       hasError,
+      todoStyle,
     };
   }
 }
 </script>
 
 <style>
-  .name {
-    color: red;
+  .todo {
+    color: gray;
+    text-decoration: line-through;
   }
 </style>