Je crée une application Web à l'aide de l'API d'options CLI vuejs2 et j'essaie de créer un émetteur d'événements, mais il n'arrête pas de dire qu'il y a une erreur dans la console et rien ne s'affiche lorsque l'on clique sur un bouton avec un émetteur d'événements.

L'erreur est affichée dans la console

Voici mon code dans le composant enfant :

<template>
  <li>
    <h2>{{ name }} {{ friendIsFavorite ? "(Favorite)" : "" }}</h2>
    <button @click="toggleFavs">Toggle Favorite</button>
    <button @click="toggleDetails">Show Details</button>
    <ul v-if="detailsAreVisible">
      <li><strong>Phone:</strong> {{ phoneNumber }}</li>
      <li><strong>Email:</strong> {{ emailAddress }}</li>
    </ul>
  </li>
</template>

Le premier bouton utilisant la méthode toggleFavs est le bouton où j'envoie l'émetteur d'événement en utilisant cette méthode

toggleFavs() {
      this.$emit("toggle-fav", this.id);
    },

Le code sur le composant principal d'App.vue est le suivant :

<template>
  <header> <h1>My Friends</h1></header>
  <ul>
    <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="friend.isFavorite"
      @toggle-fav="toggleFavorites"
    ></friend-contact>
  </ul>
</template>

La méthode événementielle est définie comme :

toggleFavorites() {
      // const targetedFriend = this.friends.find(
      //   (friend) => friend.id === friendId
      // );
      // console.log(targetedFriend);
      // targetedFriend.isFavorite = !targetedFriend.isFavorite;
      alert("This Works"); //just for demonstration but not working

Aidez-moi, je suis coincé.

Voici le code :