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

 }

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

时

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

有效

我如何使其在li元素上起作用

Answer 1

在VueJS 2.x中，组件（例如router-link）上的事件监听器仅监听自定义事件。如果您需要侦听组件上的本机事件，则需要使用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://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

路由器链接标签li上的vuejs2 mousehover失败

1 个答案: