La propriété "toggleFavorites" a été accédée lors du rendu, mais la propriété n'était pas définie dans l'erreur d'instance

Question

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 :

Answer 1

Il y a deux problèmes avec votre code. Le premier a été mentionné par @BoussadjraBrahim, qui est une faute de frappe (mehtod au lieu de méthodes). Le deuxième problème n'est pas d'importer le composant FriendContact dans App.vue et de l'ajouter à l'objet components.

sssccc

Exemple corrigécode