ElementUI中绑定@click失效问题

最新推荐文章于 2023-12-06 09:56:30 发布
最新推荐文章于 2023-12-06 09:56:30 发布
阅读量479 收藏 1
点赞数 1
文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55856928/article/details/130543166
版权

由于Vue的@click是封装的，所以在elementui的组件里需要加上.native属性，这时如果用的循环渲染的radio组件，可能会看到这样的情况

@click.native.prevent条件下

会丢失elementui的原有效果

只需把prevent去掉或换成.stop即可（stop阻止点击事件冒泡到父组件）

 

NUAA_CX
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue组件中click事件失效的问题
10-16
今天小编就为大家分享一篇解决vue组件中click事件失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决VUE双向绑定失效的问题
10-16
今天小编就为大家分享一篇解决VUE双向绑定失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用element-ui后@click不生效问题
yhl_nsd的博客
12-10 1006
原因 Vue 使用的是一套自己的事件传递机制，如 @click 等事件是经过 Vue 封装的。因此，在一些实际上处理 DOM 原生事件的场合需要添加额外的标识符。 解决方案 为 @click 添加标识符 .native。 <el-col :span="8" class="security" @click.native="refreshCode"> ...
Iview Dropdown @click点击事件无效
weixin_43617546的博客
12-25 536
Iview Dropdown下拉菜单 click点击事件无效 报错：Uncaught TypeError: Cannot read property ‘$emit’ of undefined 在@click在面加上@click.navite就能解决 <DropdownMenu slot="list"> <DropdownItem @click="clickEvent">点击事件</DropdownItem> </DropdownMenu>
el-amap-marker添加点击事件用@click不生效
最新发布
weixin_44074685的博客
12-06 300
给el-amap-marker添加点击事件需要用另一种方法。将events添加到labelMarkers中。
element-ui 在el-row el-col 上@click失效问题
群峰之巅的博客
03-08 3669
在使用element-ui的时候 发现使用饿了么自带的布局 el-row el-col时，如果想添加点击事件的时候，点击事件失效 @click失效。 经过查证，发现可以使用方法 @click.native代替@click即可 //无效 &lt;el-row @click="goPersonInfo(item)"&gt;&lt;/el-row&gt; //有效 &lt;el-row...
elementui单选框绑定事件失效
张杰伦的博客
12-15 1506
今天使用elementui 的单选框是遇到了绑定点击事件没作用的情况， 把事件改为change之后还是一样，查阅资料之后，发现添加标识符后就成功了
解决jquery appaend元素中id绑定事件失效的问题
10-19
在jQuery中，动态添加元素（如使用`append`方法）并尝试为这些新添加的元素绑定事件时，可能会遇到一个问题：绑定的事件无法正常触发。这是因为JavaScript的事件处理方式是基于DOM（文档对象模型）的，当元素在页面...
解决VUE框架 导致绑定事件的阻止冒泡失效问题
08-27
Vue框架中绑定事件的阻止冒泡失效问题解决方案 在Vue框架中，绑定事件的阻止冒泡失效问题是一个常见的问题。当我们使用Vue框架时，因为框架内部对DOM的处理，导致绑定事件的阻止冒泡失效。下面我们将探讨这个问题的...
ElementUi ＜el-table＞中按钮点击操作阻止@row-click点击
nsnydnz的博客
10-17 3150
ElementUi 中按钮点击操作阻止@row-click点击 文章目录ElementUi 中按钮点击操作阻止@row-click点击 添加@row-click点击行时，会跳转到一个详细信息页面， 但是同时这一行也有编辑和删除类似其他的点击按钮。 遇到问题： 在点击按钮时，@row-click事件也被触发了，而我并不想触发 row-click 事件 解决办法： 写按钮的 @click 事件时添加 .stop <el-table :data="list.data" class="el-table-st
解决当菜单下拉框点击事件click无效，点击两次才能跳转路由地址的问题（native时间修饰符）
weixin_45096939的博客
01-10 608
native修饰符只能用在组件上, 不能用在原生标签上（Element-ui组价库都是自定义组件）；native---监听组件根元素的原生事件，主要是给自定义的组件添加原生事件；解决办法：在点击事件click后面加.native就可以解决了。在 vue3 中 v-on 的.native修饰符已经被弃用了；@是v-on的简写；
element ui的单选按钮el-radio给它增加@click.native.prevent点击事件后为什么无法被选中？
weixin_42775357的博客
07-12 2187
现在需求是一列动态加载的数据，每条数据后面跟一个单选按钮，当单选按钮被点击时，弹出弹框，显示当前点击行的内容。 为什么给单选按钮加了 @click.native.prevent事件之后，点击按钮就只会弹框，但是按钮不会被选中了？如果去掉点击事件，是可以正常点击选中的。 <!-- 单选方法,返回选中的表格行 --> <el-table-column align="center" label="选择" width="55"> <template slot-scope="scop
Element u中el-select、el-row、el-dropdown-item等等标签添加@click事件无效解决方法
qq_42483780的博客
04-12 1002
如下： <el-row @click.native="handle"></el-row> //js handle(){ console.log('我生效啦') } 重点：在@click后加上.native 原因：vue封装@click这些方法时阻止了原生的DOM事件，而native就是释放DOM原生事件。
解决vue使用element组件无法绑定鼠标事件，例如click，mousedown，mouseup等等
m0_46627730的博客
09-19 1620
前言 最近使用element的tag组件来做移动组件效果，其中涉及到给tag组件绑定mousedown的事件，但怎么绑定都不起作用，通过和其他标签绑定该事件比较发现：问题就出在tag组件上。 解决方法 绑定事件时添加.native修饰符绑定原生事件即可。 <el-tag v-for="tag in collapse.tags" :key="tag" v-show="tag" style="z-index: 55;" @mousedown.native="moveTag" > {{
Vue的click事件在html中失效问题
wen13727561564的博客
05-10 1361
这个问题也是困扰了我一个多小时，一开始以为vue.js引入不成功，运行后打开Vue调试器也成功，所以Vue是引入成功的。又检查了vue版本是不是2，也没问题。这样即可正常触发vue.methods中定义的方法了。
element在el-row 或者 el-col 上使用@click失效
yimeichengxuyuan的博客
05-11 1521
使用element标签时注意！ 问题： 写项目的时候使用element-ui中el-row时，发现直接用@click="fn"无法触发点击事件，在其内部或者外部加上自己写的html标签（如：div、span）是生效的。 //不生效代码 <el-row class="register" @click="goRegister()"> 还没有账号，去注册</el-row> 改正： el-row,el-col上的点击事件需要加.native,就可以实现点击事件 //生效 <el-
elementUI el-table @row-click 解决行内冲突--忽略指定列区域点击效果
Sunshine_Jian的博客
12-22 7811
单击el-table行的时候；忽略指定列；
vue elementUI el-input的click事件与清空按钮的事件冲突问题解决
qq_52342911的博客
06-01 1222
【代码】vue elementUI el-input的click事件与清空按钮的事件冲突问题解决。
elementUi 中的 @keyup.enter.native
03-29
在 ElementUI 中，@keyup.enter.native 可以用于监听 Input 输入框内的回车键事件，例如： ```html <el-input v-model="inputValue" @keyup.enter.native="handleSearch"> ``` 在上面的代码中，当用户在 Input 中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值