Sifat "toggleFavorites" telah diakses semasa Render, tetapi sifat itu tidak ditentukan dalam ralat contoh

Question

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:

Answer 1

Terdapat dua masalah dengan kod anda. Yang pertama disebut oleh @BoussadjraBrahim, yang merupakan kesilapan menaip (mehtod dan bukannya kaedah). Masalah kedua ialah tidak mengimport komponen FriendContact dalam App.vue dan menambahkannya pada objek komponen.

sssccc

Contoh tetapkod