解决element-ui中下拉菜单子选项click事件不触发的问题


Posted in Javascript onAugust 22, 2018

将@click改为@click.native='logoutHandle';即可监听选项的点击事件。

<el-dropdown class="pull-right" >
   <span class="el-dropdown-link">
    <img src="./img/header.jpg" alt="" class="pull-right">
   </span>
   <el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="logoutHandle">退出</el-dropdown-item>
   </el-dropdown-menu>
   </el-dropdown>

vue使用element-ui,发现用@click事件不生效?怎么解决?

如下所示:

今天用到element-ui里的一个组件,下拉菜单

解决element-ui中下拉菜单子选项click事件不触发的问题

发现在组件里写入@click事件

解决element-ui中下拉菜单子选项click事件不触发的问题

在页面打开以后发现,转译了之后并没有click事件

解决element-ui中下拉菜单子选项click事件不触发的问题

最后发现用@click.native

解决element-ui中下拉菜单子选项click事件不触发的问题

就OK了!

以上这篇解决element-ui中下拉菜单子选项click事件不触发的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
微信小程序上传图片实例
May 28 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
React如何使用axios请求数据并把数据渲染到组件
Aug 05 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 #Javascript
Vue动态获取width的方法
Aug 22 #Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 #Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 #Javascript
Vue之mixin全局的用法详解
Aug 22 #Javascript
React中使用UEditor百度富文本的方法
Aug 22 #Javascript
VUE 全局变量的几种实现方式
Aug 22 #Javascript
You might like
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
Vue 一键清空表单的实现方法
2020/02/07 Javascript
python从入门到精通(DAY 2)
2015/12/20 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
党员入党表决心的话
2014/03/11 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
Oracle笔记
2021/04/05 Oracle
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
MySQL 服务和数据库管理
2021/11/11 MySQL