使用element-ui后@click不生效问题

最新推荐文章于 2024-01-31 11:01:48 发布
最新推荐文章于 2024-01-31 11:01:48 发布
阅读量1k 收藏 1
点赞数
分类专栏： 前端开发中遇到的问题 文章标签： ui vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yhl_nsd/article/details/121850346
版权

原因

Vue 使用的是一套自己的事件传递机制，如 @click 等事件是经过 Vue 封装的。因此，在一些实际上处理 DOM 原生事件的场合需要添加额外的标识符。

解决方案

为 @click 添加标识符 .native。

 <el-col :span="8" class="security" @click.native="refreshCode">
vue @click不生效_Vue+element(v2.3.2)(第四期)
weixin_33741534的博客
01-26 388
1.挂载全局变量url1.新增url.jsletBASE_URL="https://xxx.com";exportdefault{BASE_URL}2.main.jsimportgolbal_URLfrom"./utils/url";Vue.prototype.$BASE_URL=golbal_URL;3.页面使用console.log(this.$BASE_UR...
element在el-row 或者 el-col 上使用@click失效
yimeichengxuyuan的博客
05-11 1660
使用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中绑定@click失效问题
qq_55856928的博客
05-07 543
由于Vue的@click是封装的，所以在elementui的组件里需要加上.native属性，这时如果用的循环渲染的radio组件，可能会看到这样的情况。只需把prevent去掉或换成.stop即可（stop阻止点击事件冒泡到父组件）@click.native.prevent条件下。会丢失elementui的原有效果。
vue使用element-ui后@click事件不生效
岁末zzz的博客
01-22 2743
@click改为@click.native
关于Vue中@click不生效的问题
qq_39043714的博客
05-08 2140
关于Vue中@click不生效的问题 @click只能在div标签下才可以生效！
在Vue中@click方法不起效
最新发布
m0_52228992的博客
01-31 1356
在跟项目的时候，我们可能会遇到我们click点击时，需要执行多个操作，如：调用方法，修改变量等。举个例子，像这样，我们在管理项目中想要编辑某一值，编辑好后，我们希望我们的点击可以关闭弹窗的同时，将修改的值返回到后台。这时候，就可能出现点击方法不起效的情况。当然我是根据自己的来说的，情况可能不同。我在调用单方法时，一般这么写。语法问题，当点击事件包括调用方法，改变变量值时。但是，像文中这种情况却不太适用。
解决element-ui中下拉菜单子选项click事件不触发的问题
10-18
总之，通过使用.native修饰符，我们可以解决Element-UI中下拉菜单子选项click事件不触发的问题。这是处理Element-UI组件事件时的一个小技巧，但也提醒我们在开发过程中要细心分析问题，根据情况选择正确的事件绑定...
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
12-03
在本文中，我们将深入探讨如何解决在`before-upload`方法返回`false`时，`submit()`方法不生效的问题，以及如何在取消上传时仅删除特定文件。 首先，`before-upload`是`el-upload`组件的一个关键方法，它允许我们在...
element-ui 远程链接文件下载
12-14
Element UI是为Vue 2设计的，所以确保你使用的Vue版本与Element UI兼容是非常重要的。同样地，我们需要在项目中引入Vue： ```javascript <script src="path/to/vue2.js"></script> ``` 至于`axios.min.js`，这是一...
使用element-ui遇到的坑
Stargazer（仰望星空）的博客
04-23 383
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录遇到的坑1.表单重置方法未生效 提示：以下是本篇文章正文内容，下面案例可供参考 遇到的坑 1.表单重置方法未生效 官方示例： <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop=
@click失效了
weixin_35753291的博客
01-23 566
@click 代表的是 HTML 中的一个事件属性,它可以用来在用户点击元素时执行特定的 JavaScript 代码.如果 @click 失效了,可能是由于 JavaScript 代码有语法错误或者事件监听函数未正确绑定导致的.建议检查 JavaScript 代码并确保事件监听函数已正确绑定. ...
问题：自定义的组件@click无效
qq_43620210的博客
11-08 1484
原因： 自定义组件上注册的事件触发的是组件自定义的事件 解决方案： 使用@click.native注册元素的原生事件，用法和@click一样，或者对其进行改造，具体方法可以参考：https://www.jianshu.com/p/0a8a89687bb6...
vue中@click绑定事件点击不生效
jiangjunyuan168的博客
10-24 1万+
原因： 根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。 解决方法： 方法1：在@click后加上.native（监听根元素的原生事件，使用 .native 修饰符） @click.native = "..." 方法2：向外发送click事件 添加 methods 内添加 _click 方法： methods: { _click: functi
点击事件@click 失效问题
qiaoqiaoBigBoss的博客
03-09 3176
问题： 在标签上设置点击事件@click，发现无法触发事件发生 原因： 发现这个标签上有个全局样式，对它造成了影响; pointer-event: none 解决： 将这个属性值改为auto即可 pointer-event: auto 结束 祝你今天好心情！！！ ...
@click失效？@click.native
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
09-21 2395
是因为使用.native之后父级组件可以像处理原生的DOM事件一样通过 v-on 监听子组件实例的任意事件(@即为v-on:的简写)，如果不加natvie，会认为监听的是来自子组件自定义的事件，然而子组件内也没有使用$emit()来将子组件的触发事件抛出，因此onSubmit()方法没有执行。newsbox是我自己封装的一个组件，问题就出在这儿，newsbox是子组件，想要直接在父组件触发click方法，直接写上@click是不能触发方法的。你可能想在某个组件的根元素上监听一个原生事件。
vue中div@click不起作用
sinat_23336093的博客
09-08 1万+
vue中div@click不起作用 前提，一个外层div，样式：position: relative;，设置了点击事件@click 里面用了position: absolute;绝对定位，之后点击就不起作用 目前已知两种解决方法 1、最外层div的z-index层级设置比里面绝对定位的大 2、用@click.prevent也是可以的 v-on的指令修饰符 .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .
Element ui中的radio不能绑定click事件
djoiho的博客
03-24 1786
出现此情况的原因是，el-radio自身封装了@change事件
vue 元素绑定的@click方法失效问题
热门推荐
千里之行，始于足下！
10-12 2万+
今天做项目时发现一个在元素绑定的事件不生效的问题，作此记录以提醒自己。具体代码如下： <el-button @click="clickFun">按钮111</el-button> <button @click="clickFun([1,2,3,4])">按钮222</button> import {getInfo} from './api/test.js' //api接口 export default { name: 'test', data(){
vue使用element-ui组件 通过点击@click 获取到后端的方法
weixin_47748088的博客
05-12 413
data () {return {id: '',},return {],},methods: {init () {})},// 获取信息== 0) {},
el-submenu el-menu-item @click 事件监听 不生效
11-23
el-submenu和el-menu-item都是Element UI中的组件，可以用于构建导航菜单。如果它们的@click事件监听不生效，可能是以下原因之一： 1.没有正确绑定@click事件。请确保你已经正确地将@click事件绑定到了el-submenu或el-menu-item组件上。 2.事件被阻止了冒泡。如果你在el-submenu或el-menu-item组件上绑定了@click事件，并且在事件处理程序中调用了event.stopPropagation()方法，那么事件将被阻止冒泡到父级组件，导致父级组件无法接收到该事件。 3.事件被覆盖了。如果你在el-submenu或el-menu-item组件上绑定了@click事件，并且在父级组件上也绑定了@click事件，那么父级组件的事件处理程序可能会覆盖子组件的事件处理程序，导致子组件无法接收到该事件。 以下是一个el-submenu和el-menu-item @click事件监听的例子： ```html <template> <el-menu> <el-submenu @click="handleSubmenuClick"> <template slot="title">Submenu</template> <el-menu-item @click="handleMenuItemClick">Menu Item</el-menu-item> </el-submenu> </el-menu> </template> <script> export default { methods: { handleSubmenuClick() { console.log('Submenu clicked') }, handleMenuItemClick() { console.log('Menu item clicked') } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值