Während des Renderns wurde auf die Eigenschaft „toggleFavorites“ zugegriffen, die Eigenschaft war jedoch im Instanzfehler nicht definiert

Question

Ich erstelle einige Webanwendungen mit der CLI-Options-API von vuejs2 und versuche, einen Ereignis-Emitter zu erstellen, aber es wird immer wieder angezeigt, dass ein Fehler in der Konsole vorliegt und nichts angezeigt wird, wenn auf eine Schaltfläche mit einem Ereignis-Emitter geklickt wird.

Der Fehler wird in der Konsole angezeigt

Das ist mein Code in der untergeordneten Komponente:

<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>

Die erste Schaltfläche, die die toggleFavs-Methode verwendet, ist die Schaltfläche, an die ich den Ereignisemitter mit dieser Methode sende

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

Der Code der Hauptkomponente von App.vue lautet wie folgt:

<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>

Die Ereignismethode ist definiert als:

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

Hilf mir, ich stecke fest.

Das ist der Code:

Answer 1

您的代码有两个问题。第一个是@BoussadjraBrahim 提到的，这是一个拼写错误（mehtod 而不是methods）。第二个问题是没有在 App.vue 中导入 FriendContact 组件并将其添加到 components 对象中。

固定示例code