vue使用element-ui，发现用@click事件不生效？

最新推荐文章于 2024-08-16 07:34:20 发布
最新推荐文章于 2024-08-16 07:34:20 发布
阅读量3.8w 收藏 15
点赞数 13
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaohu12685/article/details/80406807
版权

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


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


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


最后发现用@click.native


就OK了

王海虎
关注
专栏目录
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 7114
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
Vue2基础（6）——vue-cli、element-ui、axios拦截器、proxy接口代理
SongD1114的博客
04-09 1772
Vue2基础vue-cli、element-ui、axios拦截器、proxy接口代理
vue 移动端在div上绑定click事件 失效
weixin_30954265的博客
02-21 2961
在.vue的文件中使用了better-scroll，在div标签上绑定click事件后，无效。 原因：使用了better-scroll，默认它会阻止touch事件。所以在配置中需要加上click: true 即可解决 mounted(){ this.$nextTick(() => { let bscrollDom ...
RF中的 click element
weixin_34242658的博客
03-23 1856
稍后更新。。。 转载于:https://www.cnblogs.com/Chamberlain/p/10584415.html
Vue.js 中的 @click 事件详解
最新发布
weixin_63490470的博客
08-16 3054
除了使用@click指令监听原生 DOM 事件，Vue.js 还允许我们自定义事件，并在组件之间进行通信。-- 父组件 --> < template > < div > < ChildComponent @custom-event = " handleCustomEvent " /> < script > import ChildComponent from './ChildComponent.vue';
Robot Framework Selenium2Library 自动化测试中点击操作 click element
热门推荐
huhuliuxia的专栏
12-09 1万+
Comment Click Element xpath=//div[@id='plandiv_dayTimePlan0']/div Comment Focus xpath=//div[@id='plandiv_dayTimePlan0']/div Comment SWTA.Mouse Down xpath=//div[@id='plandiv_dayTimePlan0']/div Comme
rf-关键字——一个小细节click button/element
weixin_41755681的博客
05-31 2160
1.打开浏览器 Open Browser http://www.baidu.com chrome 2.关闭浏览器 Close Browsers Close All Browser 3.浏览器最大化 Maximize Browser Window 4.设置浏览器窗口宽、高 Set Window Size 800 600 5.文本输入 Input Text xpath=//*[@] 输入信息 6.点击元素 Click Element ...
当我们使用element-ui，el-button里面的@click事件不生效
Mr___YangYang的博客
07-07 6622
当@click点击无效的时候,这时候我们要.....
解决element-ui中下拉菜单子选项click事件不触发的问题
10-18
在使用Vue框架结合Element-UI组件库开发中，我们可能会遇到下拉菜单中子选项的click事件无法触发的问题。Element-UI是一个基于Vue 2.0的桌面端组件库，广泛用于快速开发页面组件。其中，<el-dropdown>组件提供了下拉...
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
12-03
在Vue2.0中，Element-UI库提供了一个强大的组件`el-upload`，用于处理文件上传功能。在本文中，我们将深入探讨如何解决在`before-upload`方法返回`false`时，`submit()`方法不生效的问题，以及如何在取消上传时仅...
【vue】【element-ui】【错误记录】vue使用element-ui时，.native点击事件触发两次
qq_34838046的博客
10-07 1443
文章目录现象解决方法原因 现象 使用element-ui的组件el-checkbox，绑定点击事件 <el-checkbox @click="state()"></el-checkbox> 点击事件不触发 添加.native标签之后，触发了事件，但是触发了两次 <el-checkbox @click.native="state()"></el-checkbox> 解决方法 通过事件对象元素的类型，过滤事件 修改为 <el-ch
AJAX+VUE+Element项目过程中出现el-button中点击事件没有没有响应
qq_44151022的博客
03-03 3097
出现的问题： 我们希望在点击提交按钮之后，能够跳转到addBrand函数中，并执行函数。 但是实际过程中我们发现，点击之后并没有任何反应。因此我们怀疑是点击按钮之后并没有跳转到函数并执行。 通过百度搜索得知可以通过修改@click -> @click.native解决这个问题。 然而我们修改完毕之后发现并没有作用。 于是我们开始寻找其他的方法。 在函数addBrand中添加日志文件，然后执行项目，并且在浏览器端发现点击按钮时，实际上已经执行了addBrand函数，并且已经执行了add se
element 点击事件失效问题
妙蛙真香的博客
09-14 1181
在点击事件后添加.native <el-radio-button @click.native="togoShowNav" :label="isshow"> 这个时候事件会触发两次 所以需要添加判断 if (e.target.tagName === "INPUT") return;
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
zhichaogong的博客
06-15 9423
关于element-ui弹窗组件el-dialog，阻止点击遮罩层关闭的问题，以及全局处理和局部处理的方法 前言 在使用element-ui的组件时，有时候根据项目需求，需要修改组件默认的属性值。我们公司项目的需要在el-dialog弹窗组件中写入表单数据，由于表单数据比较多，有时候误触了el-dialog的遮罩层就关闭弹窗了，导致辛辛苦苦填入的数据被清空重置。所以需要阻止弹窗遮罩层的关闭事件。 下面针对使用npm安装使用element-ui 1. 全局配置 npm引入，直接在main.js文件中写入如下
自定义指令 clickOutSide element
qq_38935512的博客
08-09 683
自定义指令 clickOutSide非常好用 出现再element-ui中，简单得把它归成一个js。 适用于：自己封装得一些提示组件，select下拉框组件，模糊搜索input等等 建一个js clickOutSide.js import Vue from 'vue'; const isServer = Vue.prototype.$isServer; const nodeList = [...
element 隐藏指令clickoutsde改造
xuxu_qkz的博客
07-11 1142
element 隐藏指令clickoutsde改造 该指令是在element 源码的指令clickoutsde的基础上改造的 作用：点击绑定指令的当前元素的外部生效触发事件 directives / clickoutsde.js // 引入Vue用以判断当前运行环境 import Vue from 'vue' // element封装的一些常用dom操作，这里on可以先当做是addE...
解决element下拉菜单子选项click事件
qq_43486347的博客
04-03 4289
解决element下拉菜单子选项click事件 <el-select v-model="value" placeholder="中文" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ...
前端element-ui组件库el-card卡片【hover效果与点击事件(点击无效用@click.native=““)解决】
在写作的路上持续输出。
09-22 9209
前端element-ui组件库el-card卡片【hover效果与点击事件(点击无效用@click.native="")解决】
引入element-ui库和样式文件，如何引入到vue，在什么位置
05-05
如果你使用的是Vue CLI，可以通过以下步骤引入Element UI： 1. 安装Element UI库：`npm install element-ui -S` 2. 在Vue项目的入口文件（一般是main.js）中，导入Element UI的样式和组件： ``` import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 3. 在Vue组件中使用Element UI的组件，例如： ``` <template> <div> <el-button>Click me</el-button> </div> </template> ``` 这样就可以在Vue项目中使用Element UI组件了。需要注意的是，引入Element UI的样式文件需要在组件之前引入，否则样式可能无法生效。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值