Cristiano Magro
2024-12-28 498b475805c4383c51ef54bc3a2bc47aa63e895a
07 - development setup/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue
@@ -1,18 +1,23 @@
<template>
    <li>
        <h2>{{ friend.name }}</h2>
        <h2>{{ name }}</h2>
        <button @click="toggleDetails">
            {{ detailsAreVisible ? 'Hide' : 'Show' }} Details
        </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',
    ],
    data() {
        return {
            detailsAreVisible: false,