我正在使用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
幫幫我,我被困住了。
這是程式碼:
您的程式碼有兩個問題。第一個是@BoussadjraBrahim 提到的,這是一個拼字錯誤(mehtod 而不是methods)。第二個問題是沒有在 App.vue 中導入 FriendContact 元件並將其新增至 components 物件中。
固定範例code
#