passaggio delle proprietà come props

Cristiano Magro

2024-12-28 498b475805c4383c51ef54bc3a2bc47aa63e895a

passaggio delle proprietà come props

per passare dati al component

 07 - development setup/vue-cli-01-a-new-vue-project/src/App.vue

@@ -1,42 +1,48 @@
<template>
    <section>
        <header>
        <h1>My friends</h1>
        </header>
        

        <ul>
            <friend-contact></friend-contact>
            <friend-contact></friend-contact>
        </ul>
    </section>
  <section>
    <header>
      <h1>My friends</h1>
    </header>
    <ul>
      <friend-contact 
      name="Manuel Lorenz" 
      phone-number="123" 
      email-address="cicio@ciccio.it"
      ></friend-contact>
      <friend-contact
      name="Jeany Torpedo" 
      phone-number="123123" 
      email-address="torpedo@ciccio.it"
      ></friend-contact>
    </ul>
  </section>
</template>

<script>
export default {
    data() {
        return {
            friends: [
                {
                    id: "manuel",
                    name: "Manuel Lorenz",
                    phone: "01234 5678 991",
                    email: "manuel@localhost.com",
                },
                {
                    id: "julie",
                    name: "Julie Jones",
                    phone: "09876 543 221",
                    email: "julie@localhost.com",
                },
            ],
        }
    },
  data() {
    return {
      friends: [
        {
          id: "manuel",
          name: "Manuel Lorenz",
          phone: "01234 5678 991",
          email: "manuel@localhost.com",
        },
        {
          id: "julie",
          name: "Julie Jones",
          phone: "09876 543 221",
          email: "julie@localhost.com",
        },
      ],
    }
  },
};
</script>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');

* {
  box-sizing: border-box;
@@ -101,5 +107,4 @@
  border-color: #ec3169;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}

</style>

 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,