Render過程中存取了"toggleFavorites"屬性，但該屬性在實例中未定義的錯誤

Question

我正在使用vuejs2 CLI 選項API 創建一些Web 應用程序，我嘗試創建一個事件發射器，但它一直說控制台中有錯誤，並且當單擊具有事件發射器的按鈕時不會顯示任何內容.

錯誤顯示在控制台中

這是我在子元件中的程式碼：

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

使用toggleFavs方法的第一個按鈕是我使用此方法發送事件發射器的按鈕

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

App.vue 主元件上的程式碼如下：

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

其中事件的方法定義為：

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

幫幫我，我被困住了。

這是程式碼：

Answer 1

您的程式碼有兩個問題。第一個是@BoussadjraBrahim 提到的，這是一個拼字錯誤（mehtod 而不是methods）。第二個問題是沒有在 App.vue 中導入 FriendContact 元件並將其新增至 components 物件中。

sssccc

固定範例code

#