emit an event
This commit is contained in:
parent
708ab00477
commit
471ecb7e73
|
@ -5,9 +5,12 @@
|
|||
<friend-contact
|
||||
v-for="friend in friends"
|
||||
:key="friend.id"
|
||||
:id="friend.id"
|
||||
:name="friend.name"
|
||||
:email-address="friend.email"
|
||||
:phone-number="friend.phone"
|
||||
:is-favorite="friend.isFavorite"
|
||||
@toggle-favorite="togggleFavoriteStatus"
|
||||
></friend-contact>
|
||||
</ul>
|
||||
</div>
|
||||
|
@ -23,16 +26,26 @@ export default {
|
|||
name: "Manuel Lorenz",
|
||||
phone: "0123 4567 890",
|
||||
email: "manuel@localhost.com",
|
||||
isFavorite: true,
|
||||
},
|
||||
{
|
||||
id: "julie",
|
||||
name: "Julie Jones",
|
||||
phone: "9876 5432 210",
|
||||
email: "julie@localhost.com",
|
||||
isFavorite: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
togggleFavoriteStatus(friendId) {
|
||||
const identifiedFriend = this.friends.find(
|
||||
(friend) => friend.id === friendId
|
||||
);
|
||||
identifiedFriend.isFavorite = !identifiedFriend.isFavorite;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
@ -14,6 +14,10 @@
|
|||
export default {
|
||||
//props: ["name", "emailAddress", "phoneNumber"],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
|
@ -35,7 +39,6 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
detailsAreVisible: false,
|
||||
friendIsFavorite: this.isFavorite,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
@ -47,7 +50,13 @@ export default {
|
|||
}
|
||||
},
|
||||
isFavoriteText() {
|
||||
if (this.friendIsFavorite) {
|
||||
if (this.isFavo>{{ name }} {{ isFavoriteText }}</h2>
|
||||
<button @click="toggleDetails()">{{ buttonDetailsText }}</button>
|
||||
<button @click="toggleFavorite()">Mark as Favorite</button>
|
||||
<ul v-if="detailsAreVisible">
|
||||
<li><strong>Phone:</strong> {{ phoneNumber }}</li>
|
||||
<li><strong>Email:</strong> {{ emailAddress }}</li>
|
||||
</ul>rite) {
|
||||
return "(Favorite)";
|
||||
} else {
|
||||
return "";
|
||||
|
@ -59,7 +68,7 @@ export default {
|
|||
this.detailsAreVisible = !this.detailsAreVisible;
|
||||
},
|
||||
toggleFavorite() {
|
||||
this.friendIsFavorite = !this.friendIsFavorite;
|
||||
this.$emit("toggle-favorite", this.id);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
Reference in New Issue