I'm new to Vue.js. I used to think that Events worked by bubbling up through the DOM tree until caught by a parent element. However, something seems to be off. The code below isn't functioning as expected - there are no errors or warnings, and in the Vue developer tools, I can see the event being emitted. What am I overlooking?
index.html:
<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e79192829fa7d4c9d6c9d5">[email protected]</a>/dist/vuex.js"></script>
</head>
<body>
<div id="app" @button-clicky="gotevent">
<div @button-clicky="gotevent">
<h1>{{ info }} {{ counter }}</h1>
<button-component />
</div>
</div>
<script src="./main.js"></script>
</body>
</html>
main.js:
Vue.component('button-component', {
data: function() {
return {
count: 1
}
},
methods:
{
clicky() {
this.$data.count++;
this.$emit('button-clicky');
}
},
template: `<button @click="clicky">Go {{ count }}</button>`
});
const vue = new Vue({
el: '#app',
data: {
info: "this is title.",
counter: 0
},
methods: {
gotevent() {
this.$data.counter++;
alert('The event was heard!'); }
}
});
Is it not possible to listen for an event on any parent level above the component emitting it?
I've added the event listener both on the direct parent <div> and the 'app' container, but nothing happens - no errors or warnings.