Child component is triggering a custom event:
<template>
<div id="controls-container" class="controls-container">
<div class="control-button icon-zoom-in" @click="zoomHandler('+')"></div>
<div class="control-button icon-zoom-out" @click="zoomHandler('-')"></div>
</div>
</div>
</template>
<script>
export default {
name: "ControlsContainer",
methods: {
zoomHandler(direction) {
console.log("this message will be displayed");
this.$emit('zoomHandler', direction);
}
}
};
</script>
Parent component is not receiving the emitted event:
<template>
<div id="map" ref="map" class="navigation-map">
<controls-container @zoomHandler="zoom"></controls-container>
</div>
</template>
<script>
import ControlsContainer from "./ControlsContainer.vue";
export default {
name: "NavigationMap",
components: { ControlsContainer },
methods: {
zoom(direction) {
console.log("message will not display");
if (direction === "+") {
this.map.zoomIn();
} else if (direction === "-") {
this.map.zoomOut();
} else {
// Do nothing
}
},
},
</script>
I have gone through multiple tutorials on this and they all demonstrate the same approach I am following. After spending hours on this, I really hope it's not something trivial...