When I call a function, for example on click, it works whether or not I use curly braces. However, I have created a function that triggers a custom event from a child component. I then await this event in a parent component and update the state with my parent function. Strangely, when I include curly braces in that function, Vue throws an error. Can someone shed some light on why this is happening? (I'm still new to Vue.js :))
The function in the child component triggered on click:
toggleFavorite: function () {
this.$emit("toggle-favorite", this.id);
}
A child component being rendered inside a parent component:
<friend-contact
v-for="friend in friends"
:data="friend"
:key="friend.id"
@toggle-favorite="toggleFavorite"> // if i write 'toggleFavorite()' here, I am
// getting an error
</friend-contact>
The function which is executed on the custom event:
toggleFavorite: function (id) {
let friendToUpdate = this.friends.find((el) => el.id === id);
friendToUpdate.favorite = !friendToUpdate.favorite;
}