ElementUI中绑定@click失效问题

最新推荐文章于 2023-12-05 09:33:30 发布
最新推荐文章于 2023-12-05 09:33:30 发布
阅读量478 收藏 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双向绑定失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
elementUI el-table @row-click 解决行内冲突--忽略指定列区域点击效果
Sunshine_Jian的博客
12-22 7801
单击el-table行的时候；忽略指定列；
ElementUi ＜el-table＞中按钮点击操作阻止@row-click点击
nsnydnz的博客
10-17 3144
ElementUi 中按钮点击操作阻止@row-click点击 文章目录ElementUi 中按钮点击操作阻止@row-click点击 添加@row-click点击行时，会跳转到一个详细信息页面， 但是同时这一行也有编辑和删除类似其他的点击按钮。 遇到问题： 在点击按钮时，@row-click事件也被触发了，而我并不想触发 row-click 事件 解决办法： 写按钮的 @click 事件时添加 .stop <el-table :data="list.data" class="el-table-st
使用element-ui后@click不生效问题
yhl_nsd的博客
12-10 1005
原因 Vue 使用的是一套自己的事件传递机制，如 @click 等事件是经过 Vue 封装的。因此，在一些实际上处理 DOM 原生事件的场合需要添加额外的标识符。 解决方案 为 @click 添加标识符 .native。 <el-col :span="8" class="security" @click.native="refreshCode"> ...
vue elementUI el-input的click事件与清空按钮的事件冲突问题解决
qq_52342911的博客
06-01 1217
【代码】vue elementUI el-input的click事件与清空按钮的事件冲突问题解决。
element-ui输入框（el-input）前缀图标和后缀图标 并添加点击事件（vue3 插槽）
m0_66572664的博客
09-22 3015
vue3 el-input添加搜索图标 并给图标绑定click事件
解决jquery appaend元素中id绑定事件失效的问题
10-19
在jQuery中，动态添加元素（如使用`append`方法）并尝试为这些新添加的元素绑定事件时，可能会遇到一个问题：绑定的事件无法正常触发。这是因为JavaScript的事件处理方式是基于DOM（文档对象模型）的，当元素在页面...
解决VUE框架 导致绑定事件的阻止冒泡失效问题
08-27
Vue框架中绑定事件的阻止冒泡失效问题解决方案 在Vue框架中，绑定事件的阻止冒泡失效问题是一个常见的问题。当我们使用Vue框架时，因为框架内部对DOM的处理，导致绑定事件的阻止冒泡失效。下面我们将探讨这个问题的...
element ui的单选按钮el-radio给它增加@click.native.prevent点击事件后为什么无法被选中？
weixin_42775357的博客
07-12 2185
现在需求是一列动态加载的数据，每条数据后面跟一个单选按钮，当单选按钮被点击时，弹出弹框，显示当前点击行的内容。 为什么给单选按钮加了 @click.native.prevent事件之后，点击按钮就只会弹框，但是按钮不会被选中了？如果去掉点击事件，是可以正常点击选中的。 <!-- 单选方法,返回选中的表格行 --> <el-table-column align="center" label="选择" width="55"> <template slot-scope="scop
element的单选el-radio实现click点击事件，el-radio-group @click事件，@click.native.prevent
最新发布
羽渡尘的博客
12-05 4602
今天碰见一个需求， element的 el-radio-group 如果设置了默认值，那么默认选中的单选、是不能再次点击并且触发他的默认事件的。需求是既要默认还要能够点击触发。那么大多数人的想法是使用 @click.native，然后就出现了问题（没有禁止原生带的事件所产生的,绑定的值错误问题），下面给出解决方案（使用@click.native.prevent 相当于重写事件了）给绑定的值、手动赋值。
【Vue-Element】el-card 的click点击事件失效解决
feifeiyechuan的博客
06-20 4019
native修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。在element-ui中，突然发现在el-card中添加click事件，怎么点击都触发不了。当然，为什么el-card不支持click，暂不清楚。查资料，说是点击事件需要写成。
el-radio等elementui组件使用@click.native时，绑定的事件会触发2次的问题
SilenceJude的博客
05-15 8273
场景描述 由于某些原因，elementui提供的事件并不能满足我们的需求。此时如果想监听根元素的原生事件，就只能使用.native修饰符。 本次项目中，我也遇到了同样的情况，因此使用.native修饰符来监听原生click事件。 然而，在点击的时候，却发现el-radio上绑定的事件触发了2次！！ 解决过程 自己找了半天，也没找到问题所在。但是大概猜想到了原因，el-radio肯定是封装了好...
element绑定点击事件无效怎么解决？
眾K的博客
03-14 1302
解决方法。 @click 这样写是无效的~ vue封装@click这些方法时阻止了原生的DOM事件，而native就是释放DOM原生事件 @click.native 这样写才可以~
element-ui 在el-row el-col 上@click失效问题
群峰之巅的博客
03-08 3666
在使用element-ui的时候 发现使用饿了么自带的布局 el-row el-col时，如果想添加点击事件的时候，点击事件失效 @click失效。 经过查证，发现可以使用方法 @click.native代替@click即可 //无效 &lt;el-row @click="goPersonInfo(item)"&gt;&lt;/el-row&gt; //有效 &lt;el-row...
Element u中el-select、el-row、el-dropdown-item等等标签添加@click事件无效解决方法
qq_42483780的博客
04-12 1001
如下： <el-row @click.native="handle"></el-row> //js handle(){ console.log('我生效啦') } 重点：在@click后加上.native 原因：vue封装@click这些方法时阻止了原生的DOM事件，而native就是释放DOM原生事件。
Vue的click事件在html中失效问题
wen13727561564的博客
05-10 1357
这个问题也是困扰了我一个多小时，一开始以为vue.js引入不成功，运行后打开Vue调试器也成功，所以Vue是引入成功的。又检查了vue版本是不是2，也没问题。这样即可正常触发vue.methods中定义的方法了。
给element-ui的steps加@click.native事件
qq_39343308的博客
12-13 3984
       今天有个需求需要给element-ui的steps添加点击跳转，看了看steps的API没有这个属性。就给它添加一个@click事件吧，添加之后发现不好使，找了一番资料发现得这样写就可以了@click.native       这个native是什么作用呢？       查了一番资料大概就是vue封装@click这些方法时阻止了原生的DOM事件，而native就是释放DOM原生事...
elementUi 中的 @keyup.enter.native
03-29
@keyup.enter.native 是一个 Vue 指令，用于绑定在一个元素上，当用户在该元素内按下回车键时触发相应的事件。这个指令可以用于监听键盘事件，当按下回车键时触发事件，通常用于表单提交、搜索等场景中。 在 ElementUI 中，@keyup.enter.native 可以用于监听 Input 输入框内的回车键事件，例如： ```html <el-input v-model="inputValue" @keyup.enter.native="handleSearch"></el-input> ``` 在上面的代码中，当用户在 Input 中按下回车键时，会触发 handleSearch 方法，该方法通常用于执行搜索操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值