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 badff46..b015b13 100644
--- a/vue-cli-01-a-new-vue-project/src/App.vue
+++ b/vue-cli-01-a-new-vue-project/src/App.vue
@@ -5,9 +5,12 @@
@@ -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;
+ },
+ },
};
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 3111f11..d8f44cd 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
@@ -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 }}
+
+
+
+ - Phone: {{ phoneNumber }}
+ - Email: {{ emailAddress }}
+
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);
},
},
};