In the Vue component, I have the following setup:
data: function() {
return {
quotes: []
};
},
created() {
eventBus.$on("quoteWasAdded", message => {
this.quotes.push(message);
this.$emit("quotesWereUpdated", this.quotes);
});
}
My goal is to trigger a custom event when the quotes array gets updated so that I can use it in a parent component or other siblings.
Although I'm attempting to utilize it in the parent component, I'm getting an undefined result.
Here is the code snippet from the Parent component:
<template>
<div class="container">
<p>{{messages.length}}</p>
<quote-header></quote-header>
<new-quote></new-quote>
<quotes @quotesWereUpdated="messages = $event"></quotes>
</div>
</template>