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 | 53 ++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 44 insertions(+), 9 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
index e32a8d4..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,33 +1,68 @@
<template>
<li>
- <h2>{{ friend.name }}</h2>
+ <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> {{ friend.phone }}</li>
- <li><strong>Email:</strong> {{ friend.email }}</li>
+ <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,
- friend: {
- id: "manuel",
- name: "Manuel Lorenz",
- phone: "01234 5678 991",
- email: "manuel@localhost.com",
- }
}
},
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