【问题标题】:Why @mouseover action in vue cannot work为什么 vue 中的 @mouseover 操作不起作用
【发布时间】:2018-02-27 20:36:27
【问题描述】:

鼠标悬停动作不起作用;当我将鼠标悬停时,它无法控制台记录消息

代码

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

【问题讨论】:

    标签: vue.js mouseover


    【解决方案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

    【讨论】:

    • 它有效!但是有一个问题:&lt;el-menu-item index="1" @click="showUp"&gt;find Music&lt;/el-menu-item&gt;我这样编码的时候,不带native参数的点击,也可以做同样的工作
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-09-16
    • 2020-06-08
    • 1970-01-01
    • 2017-04-25
    • 1970-01-01
    • 2012-08-31
    相关资源
    最近更新 更多