Render過程中存取了"toggleFavorites"屬性，但該屬性在實例中未定義的錯誤
我正在使用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
幫幫我，我被困住了。
這是程式碼：
