From 47c3d226b0a3caa17326a5efb2a9c1f952a001bf Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Mon, 1 Feb 2021 21:36:35 +0100
Subject: [PATCH] add a delete button

---
 vue-cli-01-a-new-vue-project/src/App.vue                 | 5 +++++
 .../src/components/FriendContact.vue                     | 9 +++++++++
 2 files changed, 14 insertions(+)

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 6cee210..09f6a16 100644
--- a/vue-cli-01-a-new-vue-project/src/App.vue
+++ b/vue-cli-01-a-new-vue-project/src/App.vue
@@ -12,6 +12,7 @@
                 :phone-number="friend.phone"
                 :is-favorite="friend.isFavorite"
                 @toggle-favorite="togggleFavoriteStatus"
+                @delete-friend="deleteFriend"
             ></friend-contact>
         </ul>
     </div>
@@ -49,6 +50,10 @@ export default {
         addContact(NewFriend) {
             this.friends.push(NewFriend);
         },
+        deleteFriend(id) {
+            //if the ID matches drop the friend
+            this.friends = this.friends.filter((friend) => friend.id !== id);
+        },
     },
 };
 </script>
diff --git a/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue b/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue
index 8a3ba17..04d770a 100644
--- a/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue
+++ b/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue
@@ -7,6 +7,7 @@
             <li><strong>Phone:</strong> {{ phoneNumber }}</li>
             <li><strong>Email:</strong> {{ emailAddress }}</li>
         </ul>
+        <button @click="$emit('delete-friend', id)">Delete</button>
     </li>
 </template>
 
@@ -45,6 +46,14 @@ export default {
                 return false;
             }
         },
+        "delete-friend": function(id) {
+            if (id) {
+                return true;
+            } else {
+                console.warn("ID is missing!");
+                return false;
+            }
+        },
     },
     data() {
         return {