javascript - vuejs2 鼠标悬停在 routerlink 标签 li 上失败

Question

我有以下链接

     <router-link v-for="(setting, key) in settings"
                  :key="key" class="has-sub-menu"
                    tag="li" :to="setting.to"
                    @mouseover="linkHover(true)" @mouseleave="linkHover(false)"
                    >
                  <router-link
                          :to="setting.to">
                      <div class="icon-w">
                          <div :class="setting.icon"></div>
                      </div>
                      <span >{{setting.name}}</span> //here it works
                  </router-link>
                  <div class="children">
                        ///here children stuff
                   <div>

        </router-link>

上面生成了一个html

<li><a href="">my link</a></li>

在我的脚本中

data:()=>({
    settings:[
     {name:'Home',to:'/', children:[{name:'test2'}]}
      //other routes here
    ]
 })
 methods:{
   linkHover(val){
    console.log("test",val)
   }    

 }

上面的hover无法登录到控制台但是当我将鼠标悬停到

<span @mouseover="linkHover(true)">

有效

如何让它在 li 元素上工作

Answer 1

在 VueJS 2.x 组件上的事件监听器(例如 router-link)仅监听自定义事件。如果您需要监听组件上的 native 事件，则需要使用 native 修饰符

<router-link v-for="(setting, key) in settings"
                  :key="key" class="has-sub-menu"
                    tag="li" :to="setting.to"
                    @mouseover.native="linkHover(true)" @mouseleave.native="linkHover(false)"
                    >
....

https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components