add a delete button

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>

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 {