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 |   68 ++++++++++++++++++++++++++++++++++
 1 files changed, 68 insertions(+), 0 deletions(-)

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
new file mode 100644
index 0000000..d335955
--- /dev/null
+++ b/07 - development setup/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue
@@ -0,0 +1,68 @@
+<template>
+    <li>
+        <h2>{{ name }} {{ isFavorite ? '(Favorite)' : '' }}</h2>
+        <button @click="toggleDetails">
+            {{ detailsAreVisible ? 'Hide' : 'Show' }} Details
+        </button>
+
+        <button @click="toggleFavorite">
+            Toggle favorite
+        </button>
+        <ul v-if="detailsAreVisible">
+            <li><strong>Phone:</strong> {{ phoneNumber }}</li>
+            <li><strong>Email:</strong> {{ emailAddress }}</li>
+        </ul>
+    </li>
+</template>
+
+<script>
+export default {
+    // props: [
+    //     'name',
+    //     'phoneNumber',
+    //     'emailAddress',
+    //     'isFavorite'
+    // ],
+    props: {
+        id:{
+            title: String,
+            required: true
+        },
+        name: {
+            title: String,
+            required: true
+        },
+        phoneNumber: {
+            title: String,
+            required: true
+        },
+        emailAddress: {
+            title: String,
+            required: true
+        },
+        isFavorite: {
+            title: Boolean,
+            required: false,
+            default: false,
+            // validator: function (value) {
+            //     return value === '1' || value === '0';
+            // }
+        },
+    },
+
+    data() {
+        return {
+            detailsAreVisible: false,
+        }
+    },
+    methods: {
+        toggleDetails() {
+            this.detailsAreVisible = !this.detailsAreVisible;
+        },
+        toggleFavorite() {
+            // this.friendIsFavorite = !this.friendIsFavorite;
+            this.$emit('toggle-favorite', this.id);
+        },
+    },
+};
+</script>
\ No newline at end of file

--
Gitblit v1.8.0