style scoped locali

Cristiano Magro

2024-12-30 ac100de8d8e0fc85e34cde9aec6262259b12f96c

 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>
@@ -12,6 +12,7 @@
            <li><strong>Phone:</strong> {{ phoneNumber }}</li>
            <li><strong>Email:</strong> {{ emailAddress }}</li>
        </ul>
        <button @click="$emit('delete', id)">Delete</button>
    </li>
</template>

@@ -24,6 +25,10 @@
    //     'isFavorite'
    // ],
    props: {
        id: {
            title: String,
            required: true
        },
        name: {
            title: String,
            required: true
@@ -45,11 +50,19 @@
            // }
        },
    },

    emits:['toggle-favorite', 'delete'],
    // emits: {
    //     'toggle-favorite': function (id) {
    //         if (id) {
    //             return true;
    //         } else {
    //             return false;
    //         }
    //     }
    // },
    data() {
        return {
            detailsAreVisible: false,
            friendIsFavorite: this.isFavorite,
        }
    },
    methods: {
@@ -57,8 +70,11 @@
            this.detailsAreVisible = !this.detailsAreVisible;
        },
        toggleFavorite() {
            this.friendIsFavorite = !this.friendIsFavorite;
            this.$emit('toggle-favorite', this.id);
        },
        // deleteFriend(){
        //     this.$emit('delete', this.id);
        // }
    },
};
</script>