爲什麼在vue中@mouseover動作無法工作

Question

鼠標懸停操作無法工作;它不能CONSOLE.LOG的消息時，我將鼠標放置

代碼

<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> 

Answer 1

既然你把事件提供自定義元素上，你必須使用native修改：

<el-menu-item index="1" @mouseover.native="showUp">find Music</el-menu-item> 

看多這裏：https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components