50

Author: kossiecoder

db.json

@@ -61,7 +61,7 @@
       "id": 18
     },
     {
-      "subject": "new todo",
+      "subject": "new todo2",
       "completed": true,
       "id": 21
     }

src/pages/todos/_id.vue

@@ -3,7 +3,10 @@
   <div v-if="loading">
     Loading..
   </div>
-  <form v-else>
+  <form 
+    v-else
+    @submit.prevent="onSave"
+  >
     <div class="row">
       <div class="col-6">
         <div class="form-group">
@@ -55,9 +58,10 @@ export default {
         const router = useRouter();
         const todo = ref(null);
         const loading = ref(true);
+        const todoId = route.params.id
 
         const getTodo = async () => {
-          const res = await axios.get('http://localhost:3000/todos/' + route.params.id);
+          const res = await axios.get(`http://localhost:3000/todos/${todoId}`);
 
           todo.value = res.data;
           loading.value = false;
@@ -75,11 +79,21 @@ export default {
 
         getTodo();
 
+        const onSave = async () => {
+          const res = await axios.put(`http://localhost:3000/todos/${todoId}`, {
+            subject: todo.value.subject,
+            completed: todo.value.completed
+          });
+
+          console.log(res);
+        };
+
         return {
           todo,
           loading,
           toggleTodoStatus,
           moveToTodoListPage,
+          onSave,
         };
     }
 }