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 对象中。

固定示例code