emitting custom event

Cristiano Magro

2024-12-28 8480d4ef05d995ee67c1460cf273c899fa59e89c

 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>