As my mouse cursor hovers over and exits my VueJS component, specific methods are triggered accordingly.
The methods that execute when the cursor enters and leaves my component:
// Included in the "methods" section of my Vue component file
onMouseEnter() {
window.Event.$emit("mouse-entered", this.index);
console.log("Mouse entered");
},
onMouseLeave() {
window.Event.$emit("mouse-left", this.index);
console.log("Mouse left");
},
Upon hovering and exiting the component, individual events get emitted as seen in my console:
https://i.sstatic.net/oqa1O.png
Yet, a peculiar occurrence arises within Vue dev tools showing duplicated events with each hover and exit on the component:
https://i.sstatic.net/I9sWo.png
This conflicting scenario leads to uncertainty. While refreshing the page may sporadically resolve the duplicates in dev tools, the console consistently displays single, distinct events - which aligns with the intended behavior.
Can anyone provide insight into this situation and clarify the valid source of truth?
Below is the setup for declaring and initializing my Vue instances in main.js:
// I haven't identified any duplicated Vue instances created upon page refresh
let app;
// Global event bus
window.Event = new Vue();
console.log("Event bus created");
/* This code segment ensures the firebase auth object maintains its state */
firebase.auth().onAuthStateChanged(() => {
if (!app) {
console.log("New Vue instance created");
app = new Vue({
el: '#app',
router,
store,
render: h => h(App)
});
}
});
Note that this specific component is utilized on two different routes ("dashboard" and "home"), both sustained by this caching mechanism.
// Template excerpt from App.vue file
<template>
<div id="app">
<keep-alive
v-bind:include="[ 'dashboard', 'home' ]"
<router-view></router-view>
</keep-alive>
</div>
</template>
In addition, given the persistent nature of the cached routes, it's unlikely that failure to deactivate event emitters and listeners is causing the duplication issue (or so I believe).
EDIT 1: Through a thorough search for "mouse-entered" and "mouse-left" across all project directories, I can confirm these events solely originate from the referenced Vue component.
EDIT 2: To aid in diagnostics, I attached a listener to my top-level component (App.vue) to observe potential double event reception (referencing the created hook in the code below). It indeed only captures the event once. The complete App.vue file is included to underscore the role played by "dashboard" and "home" components.
<template>
<div id="app">
<keep-alive
v-bind:include="keepAlive">
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
isLoggedIn: false,
};
},
computed: {
keepAlive() {
if (this.isLoggedIn) {
return [ 'dashboard', 'home', 'results' ];
}
return [ 'landing', 'signIn', 'signUp' ];
}
},
watch: {
/* Watches for changes in route */
$route(to, from) {
/* firebase.auth().currentUser returns null post logout */
if (firebase.auth().currentUser) {
this.isLoggedIn = true;
} else {
this.isLoggedIn = false;
}
}
},
created() {
window.Event.$on("mouse-entered", () => {
console.log("mouse-entered-from-App.vue");
});
window.Event.$on("mouse-left", () => {
console.log("mouse-left-from-App.vue");
});
}
};
</script>
Indeed, App.vue acknowledges the event once (as depicted); nonetheless, the issue of duplicate events persists within Vue dev tools :(