68

Author: kossiecoder

db.json

@@ -32,38 +32,28 @@
     },
     {
       "subject": "f",
-      "completed": false,
+      "completed": true,
       "id": 13
     },
     {
       "subject": "a",
-      "completed": false,
+      "completed": true,
       "id": 14
     },
     {
       "subject": "12",
-      "completed": false,
+      "completed": true,
       "id": 15
     },
     {
       "subject": "123",
-      "completed": false,
+      "completed": true,
       "id": 16
     },
     {
       "subject": "1234",
-      "completed": true,
-      "id": 17
-    },
-    {
-      "subject": "12345",
       "completed": false,
-      "id": 18
-    },
-    {
-      "subject": "new todo222",
-      "completed": true,
-      "id": 21
+      "id": 17
     }
   ]
 }

src/components/DeleteModal.vue

@@ -1,12 +1,12 @@
 <template>
   <Modal>
-    <template v-slot:title>
+    <template #title>
         Delete Todo
     </template>
-    <template v-slot:body>
+    <template #body>
         Are you sure you want to delete this todo?
     </template>
-    <template v-slot:footer>
+    <template #footer>
         <button 
             type="button" 
             class="btn btn-secondary" 

src/components/List.vue

@@ -0,0 +1,24 @@
+<template>
+  <div 
+    v-for="(item, index) in items"
+    :key="item.id"
+    class="card mt-2"
+  >
+    <slot :item="item" :index="index"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+    props: {
+        items: {
+            type: Array,
+            required: true
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

src/components/TodoList.vue

@@ -1,53 +1,54 @@
 <template>
-  <div 
-      v-for="(todo, index) in todos"
-      :key="todo.id"
-      class="card mt-2"
-    >
+  <List :items="todos">
+    <template #default="{ item, index }">
       <div 
         class="card-body p-2 d-flex align-items-center"
         style="cursor: pointer"
-        @click="moveToPage(todo.id)"
+        @click="moveToPage(item.id)"
       >
         <div class="flex-grow-1">
           <input 
             class="ml-2 mr-2"
             type="checkbox"
-            :checked="todo.completed"
+            :checked="item.completed"
             @change="toggleTodo(index, $event)"
             @click.stop
           >
-          <span :class="{ todo: todo.completed }">
-            {{ todo.subject }}
+          <span :class="{ todo: item.completed }">
+            {{ item.subject }}
           </span>
         </div>
         <div>
           <button 
             class="btn btn-danger btn-sm"
-            @click.stop="openModal(todo.id)"
+            @click.stop="openModal(item.id)"
           >
             Delete
           </button>
         </div>
       </div>
-    </div>
-    <teleport to="#modal">
-      <Modal 
-        v-if="showModal"
-        @close="closeModal"
-        @delete="deleteTodo"
-      />
-    </teleport>
+    </template>
+  </List>
+  
+  <teleport to="#modal">
+    <Modal 
+      v-if="showModal"
+      @close="closeModal"
+      @delete="deleteTodo"
+    />
+  </teleport>
 </template>
 
 <script>
 import { useRouter } from 'vue-router';
 import Modal from '@/components/DeleteModal.vue';
 import { ref } from 'vue';
+import List from '@/components/List.vue';
 
 export default {
     components: {
-      Modal
+      Modal,
+      List
     },
     props: {
         todos: {