emitting custom event

Cristiano Magro

2024-12-28 8480d4ef05d995ee67c1460cf273c899fa59e89c

emitting custom event

per passare dati da dentro il componente alla app soprastante

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

@@ -7,10 +7,12 @@
      <friend-contact 
      v-for="friend in friends"
      :key="friend.id"
      :id="friend.id"
      :name="friend.name" 
      :phone-number="friend.phone" 
      :email-address="friend.email"
      :is-favorite="true"
      :is-favorite="friend.isFavorite"
      @toggle-favorite="toggleFavoriteStatus"
      ></friend-contact>
    </ul>
  </section>
@@ -26,16 +28,26 @@
          name: "Manuel Lorenz",
          phone: "01234 5678 991",
          email: "manuel@localhost.com",
          isFavorite: true,
        },
        {
          id: "julie",
          name: "Julie Jones",
          phone: "09876 543 221",
          email: "julie@localhost.com",
          isFavorite: true,          
        },
      ],
    }
  },
  methods:{
    toggleFavoriteStatus(friendId){
      const found = this.friends.find( 
        (friend) => friend.id === friendId
      );
      found.isFavorite = !found.isFavorite;
    }
  }
};
</script>


 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>
@@ -24,6 +24,10 @@
    //     'isFavorite'
    // ],
    props: {
        id:{
            title: String,
            required: true
        },
        name: {
            title: String,
            required: true
@@ -49,7 +53,6 @@
    data() {
        return {
            detailsAreVisible: false,
            friendIsFavorite: this.isFavorite,
        }
    },
    methods: {
@@ -57,7 +60,8 @@
            this.detailsAreVisible = !this.detailsAreVisible;
        },
        toggleFavorite() {
            this.friendIsFavorite = !this.friendIsFavorite;
            // this.friendIsFavorite = !this.friendIsFavorite;
            this.$emit('toggle-favorite', this.id);
        },
    },
};