Sifat "toggleFavorites" telah diakses semasa Render, tetapi sifat itu tidak ditentukan dalam ralat contoh
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:
