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
帮帮我，我被困住了。
这是代码：
