ElementUI中el-dropdown-item点击事件无效问题
更新时间：2023年04月23日 10:13:13 作者：树洞菇凉
这篇文章主要介绍了ElementUI中el-dropdown-item点击事件无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
ElementUI中el-dropdown-item点击事件无效
若直接在el-dropdown-item上添加click事件，点击后没有任何反应。
在click后添加native修饰符，则可解决问题。
代码如下：
<el-dropdown> <span class="user"></span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item @click.native="changePassword">修改密码</el-dropdown-item> </el-dropdown-menu> </el-dropdown>
在给Vue组件（el-dropdown-item就是一个组件）绑定事件的时候，必须加上navtive修饰符才能生效，navtive可以监听根元素的原生事件
el-dropdown-item添加点击事件
问题
Vue引入Element-ui框架，使用其DropDown组件时，发现官网教程并没有给出el-dropdown-item点击事件的使用方法。
因此需要自定义点击事件，也就是需要添加原生的点击事件。
添加点击事件
使用 @click.native=“”，此时就可以实现点击事件了。
<el-dropdown>
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="handleClick('0')">黄金糕</el-dropdown-item>
<el-dropdown-item @click.native="handleClick('1')">狮子头</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>了解一下@click.native
@click
@click 常见于其用在Vue中的事件绑定，而@实际上是 v-on 的简写，而 v-on 则是对 vue 的事件体系封装之后的 API接口。
native
native修饰符用于处理DOM原生事件，在本文中由于组件 DropDown并没有封装点击事件，因此需要添加原生的点击事件，因此使用@click.native。
扩展@click的其他用法
@click.stop： 阻止事件冒泡@click.prevent： 阻止事件的默认行为 （提交事件不再重载页面）@click.capture： 优先触发@click.self： 只有自己能触发，子元素无法触发@click.once： 只能提交一次（. o n c e .once.once 修饰符还能被用到自定义的组件事件上。）
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
大家在vue中，经常会用到数据请求问题，常用的有vue-resourse、axios ，今天小编给大家介绍下axios的post请求 ，感兴趣的朋友跟随脚本之家小编一起看看吧2018-04-04
这篇文章主要为大家详细介绍了vue实现右上角时间显示实时刷新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
Vue+Element ui 根据后台返回数据设置动态表头操作
这篇文章主要介绍了Vue+Element ui 根据后台返回数据设置动态表头操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要给大家分享的是Vue3的几个优势，Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化，下面我们一起进入文章看看具体详情吧2021-10-10
elementUI中的$confirm调换两个按钮位置的实例代码
这篇文章主要介绍了elementUI中的$confirm调换两个按钮位置的实例代码,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了elementUI select组件使用及注意事项详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了vue axios封装以及API统一管理 ,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue项目打包后请求地址错误/打包后跨域操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue3中使用ref标签对组件进行操作方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vuex 如何动态引入 store modules，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论