I have created two Vue components. The first one is called parent-component:
Vue.component('parent-component',{
methods: {
test: function(){
alert('Option Selected');
}
},
template: `
<div><slot></slot></div>
`
});
The second component is named animals:
Vue.component('animals',{
data: function(){
return {
selected: ''
}
},
template: `
<select @change="selectionChanged" v-model="selected">
<slot></slot>
</select>
`,
methods: {
selectionChanged: function(){
this.$emit('optionselected', this.selected);
}
}
});
Now, let's take a look at my HTML code:
<div id="app">
<parent-component @optionselected="test()">
<animals>
<option>Aardvark</option>
<option>Bear</option>
<option>Cat</option>
</animals>
</parent-component>
</div>
I am attempting to pass the selected option from the child component animals to the parent component parent-component. I have emitted the optionselected event from the child component, but for some reason, the parent component is not responding to the event and the method test() is not being executed. Can someone please help me identify what I might be doing wrong here?
For a better understanding of the issue, you can check out the JSFiddle Demo