From f450ff8585664f9b3c89a36a657b1f6b7428fe27 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Mon, 1 Feb 2021 21:24:13 +0100
Subject: [PATCH] add method to emit a NewFriend

---
 vue-cli-01-a-new-vue-project/src/App.vue      |  5 ++-
 .../src/components/NewFriend.vue              | 36 ++++++++++++++++---
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/vue-cli-01-a-new-vue-project/src/App.vue b/vue-cli-01-a-new-vue-project/src/App.vue
index 2f5928f..6cee210 100644
--- a/vue-cli-01-a-new-vue-project/src/App.vue
+++ b/vue-cli-01-a-new-vue-project/src/App.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <header><h1>My Friends</h1></header>
-        <new-friend></new-friend>
+        <new-friend @add-contact="addContact"></new-friend>
         <ul>
             <friend-contact
                 v-for="friend in friends"
@@ -46,6 +46,9 @@ export default {
             );
             identifiedFriend.isFavorite = !identifiedFriend.isFavorite;
         },
+        addContact(NewFriend) {
+            this.friends.push(NewFriend);
+        },
     },
 };
 </script>
diff --git a/vue-cli-01-a-new-vue-project/src/components/NewFriend.vue b/vue-cli-01-a-new-vue-project/src/components/NewFriend.vue
index d54f529..1bebf02 100644
--- a/vue-cli-01-a-new-vue-project/src/components/NewFriend.vue
+++ b/vue-cli-01-a-new-vue-project/src/components/NewFriend.vue
@@ -1,21 +1,47 @@
 <template>
-    <form>
+    <form @submit.prevent="submitData">
         <div>
             <label>Name: </label>
-            <input type="text" />
+            <input type="text" v-model="enteredName" />
         </div>
         <div>
             <label>Phone: </label>
-            <input type="tel" />
+            <input type="tel" v-model="enteredPhone" />
         </div>
         <div>
             <label>Email: </label>
-            <input type="email" />
+            <input type="email" v-model="enteredEmail" />
         </div>
         <div><button>Add Contact</button></div>
     </form>
 </template>
 
 <script>
-export default {};
+export default {
+    emits: ["add-contact"],
+    data() {
+        return {
+            enteredName: "",
+            enteredPhone: "",
+            enteredEmail: "",
+        };
+    },
+    methods: {
+        submitData() {
+            const person = {
+                id: new Date().toISOString(),
+                name: this.enteredName,
+                phone: this.enteredPhone,
+                email: this.enteredEmail,
+                isFavorite: false,
+            };
+            this.$emit(
+                "add-contact",
+                person
+                //this.enteredPhone,
+                //this.enteredEmail
+            );
+        },
+    },
+};
 </script>