emit an event

vue-cli-01-a-new-vue-project/src/App.vue

@@ -5,9 +5,12 @@
             <friend-contact
                 v-for="friend in friends"
                 :key="friend.id"
+                :id="friend.id"
                 :name="friend.name"
                 :email-address="friend.email"
                 :phone-number="friend.phone"
+                :is-favorite="friend.isFavorite"
+                @toggle-favorite="togggleFavoriteStatus"
             ></friend-contact>
         </ul>
     </div>
@@ -23,16 +26,26 @@ export default {
                     name: "Manuel Lorenz",
                     phone: "0123 4567 890",
                     email: "manuel@localhost.com",
+                    isFavorite: true,
                 },
                 {
                     id: "julie",
                     name: "Julie Jones",
                     phone: "9876 5432 210",
                     email: "julie@localhost.com",
+                    isFavorite: false,
                 },
             ],
         };
     },
+    methods: {
+        togggleFavoriteStatus(friendId) {
+            const identifiedFriend = this.friends.find(
+                (friend) => friend.id === friendId
+            );
+            identifiedFriend.isFavorite = !identifiedFriend.isFavorite;
+        },
+    },
 };
 </script>
 

vue-cli-01-a-new-vue-project/src/components/FriendContact.vue

@@ -14,6 +14,10 @@
 export default {
     //props: ["name", "emailAddress", "phoneNumber"],
     props: {
+        id: {
+            type: String,
+            required: true,
+        },
         name: {
             type: String,
             required: true,
@@ -35,7 +39,6 @@ export default {
     data() {
         return {
             detailsAreVisible: false,
-            friendIsFavorite: this.isFavorite,
         };
     },
     computed: {
@@ -47,7 +50,13 @@ export default {
             }
         },
         isFavoriteText() {
-            if (this.friendIsFavorite) {
+            if (this.isFavo>{{ name }} {{ isFavoriteText }}</h2>
+        <button @click="toggleDetails()">{{ buttonDetailsText }}</button>
+        <button @click="toggleFavorite()">Mark as Favorite</button>
+        <ul v-if="detailsAreVisible">
+            <li><strong>Phone:</strong> {{ phoneNumber }}</li>
+            <li><strong>Email:</strong> {{ emailAddress }}</li>
+        </ul>rite) {
                 return "(Favorite)";
             } else {
                 return "";
@@ -59,7 +68,7 @@ export default {
             this.detailsAreVisible = !this.detailsAreVisible;
         },
         toggleFavorite() {
-            this.friendIsFavorite = !this.friendIsFavorite;
+            this.$emit("toggle-favorite", this.id);
         },
     },
 };