解决element-ui 下拉el-dropdown-item添加点击事件@click无效

一、原代码

      <DropdownMenu slot="list">
            <DropdownItem @click="clickPayButton(payWay)">{{payWay.names}}</DropdownItem>
          </DropdownMenu>

二、修改代码

      <DropdownMenu slot="list">
            <DropdownItem @click.native="clickPayButton(payWay)">{{payWay.names}}</DropdownItem>
          </DropdownMenu>

三、解释

关于vue中@click.native

作用:[给组件绑定原生事件]
例子:如果使用router-link标签,加上@click事件,绑定的事件会无效因为:router-link的作用是单纯的路由跳转,会阻止click事件,你可以试试只用click不用native,事件是不会触发的。此时加上.native,才会触发事件。

作者:WMLJS
链接:https://www.jianshu.com/p/bf5ede24c6e3
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文地址:https://www.cnblogs.com/wangyuxue/p/11929278.html

时间: 2024-10-29 05:08:12

解决element-ui 下拉el-dropdown-item添加点击事件@click无效的相关文章

element ui 下拉框绑定对象

废话不说直接上代码说明真相. <template> <div class="hello"> <span>可以设置的属性 value-key="id" .value-key="name"</span> <el-select placeholder="请选择" value-key="id" v-model="selectValue" @c

bootstrap 下拉菜单(dropdown)插件

使用下拉菜单的插件,您可以向任何组件(比如:导航栏,标签页,胶囊式导航,按钮)添加下拉菜单 用法 您可以切换下拉菜单(dropdown)插件隐藏内容 1.通过data属性,向链接或按钮添加data-toggle="dropdown"来切换下拉菜单. <div class="dropdown"> <a href="#" data-toggle="dropdown">下拉菜单触发器</a> &l

【JavaScript】利用onmousemove与onmouseout事件制作兼容IE6纯javascript无插件原生态的下拉菜单dropdown

下拉菜单dropdown在很多前端框架里面都有,直接拿来用就可以的,但是框架内的下拉菜单不好改,也很可能会有兼容性问题. 其实这东西完全可以利用HTML+CSS+Javascript去实现的. 效果如下: 其基本制作思想如下: 首先是HTML与CSS的布局,先布置一个table,这个table里面有两行,一行放下拉按钮,一行放下拉菜单,占据整个宽度的100%,单元格之间的行距为0. 因为共5个元素每列占20%. 这里不用div的float去布局,是因为这里使用table的话,这个下拉菜单组非常好

为下拉式菜单(DropDownList)添加第一个选项

很多方法可以为为下拉式菜单(DropDownList)添加第一个选项,下面是Insus.NET小结了几个方法,仅供参考: Html code: <body>    <form id="form1" runat="server">    <div>        <asp:DropDownList ID="DropDownList1" runat="server">        

jquery无法为动态生成的元素添加点击事件的解决方法

遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <div> <ul> <li> <span> <i class='icon'>这是元素内容</i> //i是动态生成 </span> </li> </ul> </div> 解决方法如下: $(docu

android 往dialog中加入listview,并实现listview中item的点击事件

LinearLayout linearLayoutMain = new LinearLayout(this);//自定义一个布局文件 linearLayoutMain.setLayoutParams(new LayoutParams( LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)); ListView listView = new ListView(this);//this为获取当前的上下文 listView.setFadingEdg

快速解决js开发下拉框中blur与click冲突

在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦点时触发blur事件:其为表单事件,blur和focus事件不会冒泡,其他表单事件都可以.click事件:当点击元素时触发click事件:所有元素都有此事件,会产生冒泡. 示例1:blur事件为表单事件 1 2 3 4 5 6 7 8 9 10 11 12 13 <input type="te

UI下拉刷新(IOS开发)

由于表应用有两个UI设计模式: 分页模式.下拉刷新模式. 其中下拉刷新被广泛应用(新浪微博,QQ) 这里吐槽一下QQ的墨迹,其实PC桌面的应用还好,及时的扁平化.但是IOS这么大的市场,但是现在都IOS8了,为什么还在用IOS6的下拉刷新的"胶皮糖"UI样式. IOS6以后增加了一个UIRefreshControl的下拉刷新类,目前这个类只能应用于表视图界面. 在Xcode6中,还没有在故事版中增加下拉拖拽,类似label之类的控件.所以布局什么的不用太多考虑. 代码部分可重用,目前就

解决Bui框架下拉框select配合Gird弹出模态编辑框使用,无法选取编辑行的下拉内容.

这个需求比较简单,就是下拉列表的项是异步请求过来的加载的,而点击gird的编辑一行按钮实现动态选择表单的行内容: 点击编辑效果: 图中的RulesDictID项是从后台异步获取的.那么我们在前端这样写: <div class="row-fluid"> <div class="span24"> <div class="panel"> <div class="panel-header"&g