17

Author: kossiecoder

src/components/InputField.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <label for="">Name</label>
+        <input 
+            type="text" 
+            :value="value"
+            style="padding: 30px; border: 2px solid green;"
+            @input="$emit('input', $event.target.value)"
+        >
+    </div> 
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            type: String,
+            required: true
+        }
+    },
+    // methods: {
+    //     updateName(e) {
+    //         console.log(e.target.value);
+    //         this.$emit('update-name', e.target.value);
+    //     }
+    // }
+}
+</script>
+

src/views/Home.vue

@@ -1,23 +1,30 @@
 <template>
   <div>
     <h1>This is Home page</h1>
-    <KossieCoder title="home title" name="Kossie Coder"/>
+    <form action="">
+      <InputField v-model="name" />
+      <br><button>Submit</button>
+    </form>
+    {{ name }}
   </div>
 </template>
 
 <script>
-import KossieCoder from '@/components/KossieCoder.vue';
-
+import InputField from '@/components/InputField.vue';
 export default {
   components: {
-    KossieCoder
+    InputField
   },
-
   data() {
     return {
-      name: 'Kossie Coder'
+      name: ''
     }
-  }
+  },
+  // methods: {
+  //   updateName(name) {
+  //     this.name = name;
+  //   }
+  // }
 }
 </script>