I've created a child component in Vue that emits a custom event, however the listener in the parent component is not being triggered.
<template id="add-item-template">
<div class="input-group">
<input @keyup.enter="addItem" v-model="newItem" >
<span class="input-group-btn">
<button @click="addItem" type="button">Add!</button>
</span>
</div>
</template>
<div id="app" class="container">
<h2>{{ title }}</h2>
<add-item-component v-on:itemAdd="addAItem"></add-item-component>
</div>
Vue.component('add-item-component', {
template: '#add-item-template',
data: function () {
return {
newItem: ''
};
},
methods: {
addItem() {
this.$emit('itemAdd');
console.log("itemAdd In add-item-component");
}
}
});
new Vue({
el: '#app',
data: {
title: 'Welcome to Vue'
},
methods: {
addAItem: function () {
console.log("In #app, addAItem()!");
}
}
});
The "itemAdd In add-item-component" log appears in the console, but the "In #app, addAItem()!" log does not. The addAItem method in the #app component is not getting called.