Menu
The mouseover action cannot work; it cannot console.log the message when I mouseover
code
<template>
<div id="horrizontalNav">
<el-menu class="el-menu-demo" mode="horizontal" >
<el-menu-item index="1" @mouseover="showUp">find Music</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
showUp() {
console.log('succeed')
}
},
}
</script>
320
We can trigger events on an element with Vue. js by assigning a ref to the element we want to trigger events for. Then we can call methods on the element assigned to the ref to trigger the event.
The mouseover event triggers when the mouse pointer enters the div element, and its child elements. The mouseenter event is only triggered when the mouse pointer enters the div element. The onmousemove event triggers every time the mouse pointer is moved over the div element.
The $el option in Vue provides Vue with an existing HTML element to mount the Vue instance generated using the new keyword. this. $el. querySelector is used to access HTML elements and modify the element's properties.
You can't listen to the mouseover and mouseleave events like we were doing before. If your Vue component doesn't emit those events, then we can't listen to them. Instead, we can add the .native event modifier to listen to DOM events directly on our custom Vue component:
v-on directive works for "hover" event also. If you add to your question the code you've written we can probably help you get it working. And yes, Vue is simple and small and intended to be integrated with other packages like jQuery. – David K. Hess Jun 20 '15 at 14:51
Instead of creating a ton of unique events, there is only one — making it much faster! To hook everything up we will use Vue events to listen for when the mouse enters and leaves, and update our state accordingly. We will also be using the shorthand of v-on. Instead of writing v-on:event, we can just write @event.
This is because mouseenter fires a unique event to the entered element, as well as every single ancestor element. What will we be using instead, you ask?!? Instead, we will use the mouseover event. The mouseover event works pretty much the same as mouseenter. The main difference being that mouseover bubbles like most other DOM events.
Since you are putting the event on a custom element, you have to use the native modifier:
<el-menu-item index="1" @mouseover.native="showUp">find Music</el-menu-item>
see more here: https://v2.vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
