48

Author: kossiecoder

db.json

@@ -60,16 +60,6 @@
       "completed": false,
       "id": 18
     },
-    {
-      "subject": "123456",
-      "completed": false,
-      "id": 19
-    },
-    {
-      "subject": "21",
-      "completed": true,
-      "id": 20
-    },
     {
       "subject": "new todo",
       "completed": true,

src/App.vue

@@ -12,7 +12,9 @@
       </li>
     </ul>
   </nav>
-  <router-view/>
+  <div class="container">
+      <router-view/>
+  </div>
 </template>
 
 <script>

src/pages/todos/_id.vue

@@ -1,15 +1,41 @@
 <template>
-  <div>Todo Page</div>
+  <h1>To-Do Page</h1>
+  <div v-if="loading">
+    Loading..
+  </div>
+  <form v-else>
+    <div class="form-group">
+      <label>Todo Subject</label>
+      <input v-model="todo.subject" type="text" class="form-control">
+    </div>
+    <button class="btn btn-primary">Save</button>
+  </form>
 </template>
 
 <script>
 import { useRoute } from 'vue-router';
+import axios from 'axios';
+import { ref } from '@vue/reactivity';
 
 export default {
     setup() {
         const route = useRoute();
+        const todo = ref(null);
+        const loading = ref(true);
 
-        console.log(route.params.id);
+        const getTodo = async () => {
+          const res = await axios.get('http://localhost:3000/todos/' + route.params.id);
+
+          todo.value = res.data;
+          loading.value = false;
+        };
+
+        getTodo();
+
+        return {
+          todo,
+          loading,
+        };
     }
 }
 </script>

src/pages/todos/index.vue

@@ -1,6 +1,5 @@
 <template>
-<router-view/>
-  <div class="container">
+  <div>
     <h2>To-Do List</h2>
     <input
       class="form-control"