I'm having trouble sending an event to the root component. I want to emit the event when the user presses enter, and have the root component receive it and execute a function that will add the message to an array.
JavaScript:
Vue.component('input-comp',{
template : `
<div>
<input type="text" v-model ="textData" v-on:keyup.enter ="pushMessages"/>
<button v-on:click="pushMessages">Send text</button>
</div>`,
data : function(){
return {
textData : 'test Message'
}
},
methods : {
pushMessages : function(){
this.$root.$emit('message', { message: this.textData })
}
}
})
var vm = new Vue({
el : '#parent',
data : {
msgs : []
},
methods : {
pushMessages : function(payload){
this.msgs.push(payload.message)
}
},
updated(){
this.$root.$on('message', this.pushMessages)
}
})
HTML:
<div id="parent">
<p v-for="msg in msgs">{{msg}}</p>
<input-comp></input-comp>
</div>