I want to remove the mouseOver event from the template using $ref and control the mouseOver behavior within javascript. The Components component contains a child component called myStats, which should only be displayed when hovering over Components.
- I need help figuring out how to use
refto replace the commented-out template code. - Should I utilize a function of
myStats(likeonMouseEvent) or can I handlemouseOversolely insideComponents?
Components code:
<template>
<div class="pv-lookup" ref="myStats">
<!-- I would like to get rid of the commented out mouse hover event code below by using $ref: -->
<!-- <div @mouseover="mouseOver = true" @mouseout="mouseOver = false"> -->
<div>
<someComponent1 />
<someComponent2 />
<myStats v-if="mouseOver" @mouseMoved="onMouseMoved"/>
</div>
</div>
</template>
<script>
export default class Components extends Vue {
public mouseOver = false;
@Emit()
public onMouseMoved() {
this.mouseOver = !this.mouseOver;
}
mounted() {
this.$nextTick(() => {
if (this.isInhouseClient || this.isInhouse) {
// TODO: set value for this.mouseOver
// Approach 1:
// ERROR: Property 'onMouseEvent' does not exist on type 'Vue | Element | Vue[] | Element[]'.
this.$refs.myStats.onMouseEvent();
// Approach 2:
// ERROR: Property 'onMouseEvent' does not exist on type 'MouseEvent'. Did you mean 'initMouseEvent'?
const myStats= this.$refs.myStatsas HTMLElement;
myStats.addEventListener("mouseover", function( event ) {
event.onMouseEvent();
}, false);
// Approach 3:
// It's the simplest, but how do I connect with 'ref'?
this.mouseOver = !this.mouseOver;
}
});
}
}
</script>
myStats code:
<script>
export default class myStats extends Vue {
public mouseOver: boolean = false;
@Emit()
public mouseMoved(){}
public onMouseEvent() {
this.mouseMoved();
}
}
</script>
Thank you for your insights