From 8480d4ef05d995ee67c1460cf273c899fa59e89c Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Sat, 28 Dec 2024 23:15:49 +0100
Subject: [PATCH] emitting custom event
---
07 - development setup/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue | 10 +++++++---
07 - development setup/vue-cli-01-a-new-vue-project/src/App.vue | 14 +++++++++++++-
2 files changed, 20 insertions(+), 4 deletions(-)
diff --git a/07 - development setup/vue-cli-01-a-new-vue-project/src/App.vue b/07 - development setup/vue-cli-01-a-new-vue-project/src/App.vue
index 08bedae..a9ca593 100644
--- a/07 - development setup/vue-cli-01-a-new-vue-project/src/App.vue
+++ b/07 - development setup/vue-cli-01-a-new-vue-project/src/App.vue
@@ -7,10 +7,12 @@
<friend-contact
v-for="friend in friends"
:key="friend.id"
+ :id="friend.id"
:name="friend.name"
:phone-number="friend.phone"
:email-address="friend.email"
- :is-favorite="true"
+ :is-favorite="friend.isFavorite"
+ @toggle-favorite="toggleFavoriteStatus"
></friend-contact>
</ul>
</section>
@@ -26,16 +28,26 @@
name: "Manuel Lorenz",
phone: "01234 5678 991",
email: "manuel@localhost.com",
+ isFavorite: true,
},
{
id: "julie",
name: "Julie Jones",
phone: "09876 543 221",
email: "julie@localhost.com",
+ isFavorite: true,
},
],
}
},
+ methods:{
+ toggleFavoriteStatus(friendId){
+ const found = this.friends.find(
+ (friend) => friend.id === friendId
+ );
+ found.isFavorite = !found.isFavorite;
+ }
+ }
};
</script>
diff --git a/07 - development setup/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue b/07 - development setup/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue
index 3c5a041..d335955 100644
--- a/07 - development setup/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue
+++ b/07 - development setup/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue
@@ -1,6 +1,6 @@
<template>
<li>
- <h2>{{ name }} {{ friendIsFavorite ? '(Favorite)' : '' }}</h2>
+ <h2>{{ name }} {{ isFavorite ? '(Favorite)' : '' }}</h2>
<button @click="toggleDetails">
{{ detailsAreVisible ? 'Hide' : 'Show' }} Details
</button>
@@ -24,6 +24,10 @@
// 'isFavorite'
// ],
props: {
+ id:{
+ title: String,
+ required: true
+ },
name: {
title: String,
required: true
@@ -49,7 +53,6 @@
data() {
return {
detailsAreVisible: false,
- friendIsFavorite: this.isFavorite,
}
},
methods: {
@@ -57,7 +60,8 @@
this.detailsAreVisible = !this.detailsAreVisible;
},
toggleFavorite() {
- this.friendIsFavorite = !this.friendIsFavorite;
+ // this.friendIsFavorite = !this.friendIsFavorite;
+ this.$emit('toggle-favorite', this.id);
},
},
};
--
Gitblit v1.8.0