[Vuejs] 点击单选框触发两次点击事件的处理
<el-radio-group v-model="uploadStatus" class="upload-status-radio">
<el-radio label="0" class="green" @click.native="clickRadio($event, 0)">成功</el-radio>
<el-radio label="1" class="red" @click.native="clickRadio($event, 1)">失败</el-radio>
</el-radio-group>
data () {
return {
uploadStatus: '-1'
}
},
methods: {
/**
* 点击单选框取消选中状态的处理
* @param e 原生e
* @param index
*/
clickRadio (e, index) {
if (e.target.tagName === 'INPUT') return // 因为原生click事件会执行两次,第一次在label标签上,第二次在input标签上,故此处理
if (this.uploadStatus === index.toString()) {
this.uploadStatus = '-1'
}
},
}
[Vuejs] 点击单选框触发两次点击事件的处理的更多相关文章
- zepto.js 的tap事件中点击一次触发两次事件
html代码: <div class="xh-lxx-cart-count1"> <span class="minus">-</s ...
- 商务系统的构造思路(无源码!)+如何用jsp实现点击单选框内容显示在另一个jsp页面
敲码经验总结: 之前犯了一个错误就是,没有从底层开始学起,有啥问题,就直接博客园找源码,去CSDN找源代码,看到代码就复制粘贴,结果从新梳理知识点的时候,貌似除了复制粘贴,印象深刻的知识啥也没学到. ...
- wxpython中单选框的两种创建方式源码展示
#coding=utf-8 import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(self,None,-1, ...
- 解决label点击事件触发两次问题
问题描述: 通常,为了用户体验,我们点击单选框或者复选框后面文字,即可选中当前项.代码如下: <label> <input type="radio" name=& ...
- element-ui 带单选框的表格
效果:不只是带单选框,点击当前行单选框选中状态网上查了一些发现很多都是只能点击当前radio选中当前行,配合element-ui的单选table时发现两个的选择状态是不一致的,所以调整了一下效果 提供 ...
- WPF中单选框RadioButton
单选框RadioButton的基本使用: <StackPanel Margin="10"> <Label FontWeight="Bold"& ...
- JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件
本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个 ...
- PyQt4 的部件 -- CheckBox 单选框
单选框具有两种状态:被选中或未被选中. 当用户选择或者取消选择时,单选框就会发射一个stateChanged()信号 # QCheckBox 单选框 # 本例创建一个用来改变窗口标题的单选框 impo ...
- PyQt4单选框QCheckBox
PyQt4中的部件 部件是构建应用程序的基础元素.PyQt4工具包拥有大量的种类繁多的部件.比如:按钮,单选框,滑块,列表框等任何程序员在完成其工作时需要的部件. QCheckBox单选框 单选框具有 ...
随机推荐
- 绑定与非绑定方法及反射,isinstance和issubclass内置函数
目录 绑定方法与非绑定方法 1.绑定方法 2.非绑定方法(staticmethod) isinstance和issubclass 内置函数 1.isinstance 2.issubclass 反射(面 ...
- JS实现深拷贝的几种方法
引 如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力. 此篇文章中也会简单阐述到栈 ...
- POJ 2456 编程技巧之------二分查找思想的巧妙应用
Aggressive cows Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 18599 Accepted: 8841 ...
- R_针对churn数据用id3、cart、C4.5和C5.0创建决策树模型进行判断哪种模型更合适
data(churn)导入自带的训练集churnTrain和测试集churnTest 用id3.cart.C4.5和C5.0创建决策树模型,并用交叉矩阵评估模型,针对churn数据,哪种模型更合适 决 ...
- 从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型
我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分 ...
- LeetCode117----填充同一层兄弟节点
给定一个二叉树 struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *next; } 填充它的每个 ...
- MQTT协议 Websocket JS客户端
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- idea maven sync Cannot resolve xxx 的解决方案
经常会出现这种奇葩情况,提示找不到包 其实是因为网络波动或者突然断掉,导致包更新出现问题 直接去maven的仓库目录 找到不能找到的包 删掉相关目录 然后重新更新maven就行了 比如 直接去仓库目录 ...
- vue.js父子组件通信动态绑定
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 可滚动UIStackView 竖向居中 / 横向右对齐
重点: 在scroll view和stack view之间加一个UIView. 竖向居中Tutorial: https://stackoverflow.com/questions/50766400/c ...