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