Saya sedang mencipta beberapa aplikasi web menggunakan API pilihan CLI vuejs2 dan saya cuba mencipta pemancar acara tetapi ia terus mengatakan terdapat ralat dalam konsol dan tiada apa-apa dipaparkan apabila butang dengan pemancar acara diklik.

Ralat ditunjukkan dalam konsol

Ini kod saya dalam komponen anak:

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

Butang pertama menggunakan kaedah toggleFavs ialah butang tempat saya menghantar pemancar acara menggunakan kaedah ini

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

Kod pada komponen utama App.vue adalah seperti berikut:

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

Kaedah acara ditakrifkan sebagai:

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

Tolong saya, saya buntu.

Ini kodnya: