为什么Vue中的@mouseover操作无法正常工作 [英] Why @mouseover action in vue cannot work

问题描述

鼠标悬停操作无法执行；当我将鼠标悬停在

The mouseover action cannot work; it cannot console.log the message when I mouseover

代码

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

推荐答案

由于将事件放置在自定义元素上，因此必须使用native修饰符:

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>

在此处查看更多信息: https://vuejs. org/v2/guide/components.html#Binding-Native-Events-to-Components

see more here: https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components

这篇关于为什么Vue中的@mouseover操作无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！