I am facing an issue where I am attempting to trigger an $emit event from a child component in Vue to execute a function in App.vue. Despite the event being detected by both the Vue and DOM inspectors, nothing happens upon triggering it.
I have gone through various troubleshooting steps such as changing the event name, confirming that functions work with a click event, binding to different components and divs, and even trying to emit the event without any payload. However, none of these approaches seem to resolve the issue. Testing on both Firefox and Chrome led to the same outcome: the event is called but no action occurs.
Here is the code snippet for the child component and method:
<div class="navbutton" v-on:click="clicked(data.id)">
<p>{{data.text}}</p>
</div>
clicked(id){
switch(id){
case 1:
alert("One");
break;
case 2:
this.$emit('testemit');
break;
case 3:
alert("Three");
break;
case 4:
alert("Four");
break;
default:
alert("DEFAULT");
break;
}
}
And here is how the event is handled in App.vue:
<div v-on:testemit="EmitFunction"></div>
EmitFunction() {
alert('MESSAGE');
}
My expectation is to see an alert displaying 'MESSAGE' when clicking on the second button. However, despite the other buttons (1, 3, & 4) functioning correctly, no alert is triggered as expected.