69

Author: kossiecoder

src/components/Input.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="form-group">
+        <label>{{ label }}</label>
+        <input 
+            :value="subject" 
+            @input="onInput"
+            type="text" 
+            class="form-control"
+        >
+        <div 
+            v-if="error"
+            class="text-red"
+        >
+            {{ error }}
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        label: {
+            type: String,
+            required: true
+        },
+        error: {
+            type: String,
+            required: true
+        },
+        subject: {
+            type: String,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        const onInput = (e) => {
+            emit('update:subject', e.target.value);
+        };
+
+        return {
+            onInput
+        }
+    }
+}
+</script>
+
+<style scoped>
+  .text-red {
+    color: red;
+  }
+</style>

src/components/TodoForm.vue

@@ -8,20 +8,11 @@
   >
     <div class="row">
       <div class="col-6">
-        <div class="form-group">
-          <label>Subject</label>
-          <input 
-            v-model="todo.subject" 
-            type="text" 
-            class="form-control"
-          >
-          <div 
-            v-if="subjectError"
-            class="text-red"
-          >
-            {{subjectError}}
-          </div>
-        </div>
+        <Input 
+          label="Subject" 
+          v-model:subject="todo.subject"
+          :error="subjectError"
+        />
       </div>
       <div v-if="editing" class="col-6">
         <div class="form-group">
@@ -72,14 +63,16 @@
 <script>
 import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
-import { ref, computed  } from 'vue';
+import { ref, computed, onUpdated } from 'vue';
 import _ from 'lodash';
 import Toast from '@/components/Toast.vue';
 import { useToast } from '@/composables/toast';
+import Input from '@/components/Input.vue';
 
 export default {
   components: {
-    Toast
+    Toast,
+    Input
   },
   props: {
       editing: {
@@ -95,6 +88,9 @@ export default {
             completed: false,
             body: ''
         });
+        onUpdated(() => {
+          console.log(todo.value.subject)
+        })
         const subjectError = ref('');
         const originalTodo = ref(null);
         const loading = ref(false);
@@ -105,7 +101,7 @@ export default {
           triggerToast
         } = useToast();
 
-        const todoId = route.params.id        
+        const todoId = route.params.id      
 
         const getTodo = async () => {
             loading.value = true;
@@ -195,9 +191,6 @@ export default {
 </script>
 
 <style scoped>
-  .text-red {
-    color: red;
-  }
 
   .fade-enter-active,
   .fade-leave-active {