<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] 点击单选框触发两次点击事件的处理的更多相关文章

  1. zepto.js 的tap事件中点击一次触发两次事件

    html代码: <div class="xh-lxx-cart-count1"> <span class="minus">-</s ...

  2. 商务系统的构造思路(无源码!)+如何用jsp实现点击单选框内容显示在另一个jsp页面

    敲码经验总结: 之前犯了一个错误就是,没有从底层开始学起,有啥问题,就直接博客园找源码,去CSDN找源代码,看到代码就复制粘贴,结果从新梳理知识点的时候,貌似除了复制粘贴,印象深刻的知识啥也没学到. ...

  3. wxpython中单选框的两种创建方式源码展示

    #coding=utf-8 import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(self,None,-1, ...

  4. 解决label点击事件触发两次问题

    问题描述: 通常,为了用户体验,我们点击单选框或者复选框后面文字,即可选中当前项.代码如下: <label> <input type="radio" name=& ...

  5. element-ui 带单选框的表格

    效果:不只是带单选框,点击当前行单选框选中状态网上查了一些发现很多都是只能点击当前radio选中当前行,配合element-ui的单选table时发现两个的选择状态是不一致的,所以调整了一下效果 提供 ...

  6. WPF中单选框RadioButton

    单选框RadioButton的基本使用: <StackPanel Margin="10"> <Label FontWeight="Bold"& ...

  7. JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件

    本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个 ...

  8. PyQt4 的部件 -- CheckBox 单选框

    单选框具有两种状态:被选中或未被选中. 当用户选择或者取消选择时,单选框就会发射一个stateChanged()信号 # QCheckBox 单选框 # 本例创建一个用来改变窗口标题的单选框 impo ...

  9. PyQt4单选框QCheckBox

    PyQt4中的部件 部件是构建应用程序的基础元素.PyQt4工具包拥有大量的种类繁多的部件.比如:按钮,单选框,滑块,列表框等任何程序员在完成其工作时需要的部件. QCheckBox单选框 单选框具有 ...

随机推荐

  1. 解决supervisord启动问题

    作者:StormerX链接:https://www.jianshu.com/p/d8901ce4712b来源:简书简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处. $ superv ...

  2. grunt-css-sprite css 代码中的切片合并

    安装插件:npm install grunt-css-sprite --save-dev grunt-css-sprite主要功能:1.对 css 文件进行处理,收集切片序列,生成雪碧图2.在原css ...

  3. electron 设置-webkit-app-region: drag 后, 双击放大窗口变形

    双击放大后窗口只是在最左上角,并没有放大, 或者放大了页面变形,如图 原因: 是设置了窗口 transparent: true,和背景色导致的, 不要设置就可以,默认为false mainWindow ...

  4. c# 使用Split分割 换行符

    c# 使用Split分割 换行符,方法如下(其余方法有空再添加): string str = "aa" + "\r\n" + "bb"; s ...

  5. Clojure的引用类型:var,ref,agent和atom

    作为其他值的容器,也都可以解引用. deref不会阻塞. add-watch (add-watch reference key fn) 可以定义引用值发生改变时的回调,fn是4个参数 :key (at ...

  6. ubuntu E: Could not get lock /var/lib/apt/lists/lock 异常信息

    转载:https://www.cnblogs.com/qq952693358/p/6537846.html 在更换软件源时遇到了如下问题: sudo apt-get update E: Could n ...

  7. Unity3D_(插件)小地图自刷新制作Minimap小地图

    制作小地图:小地图自刷新制作小地图 原理:用不同的图标表示场景中不同的游戏物体,将(场景中)游戏物体位置实时放置小地图上,并控制图标的位置更新 好处:可更好控制小地图上所需要显示的游戏物体 游戏项目已 ...

  8. 实现图像添加label

    void CmapwingisTest2View::OnToolsAddTiffLayer() { TCHAR szFilters[]= _T("TIFF Files (*.tif)|*.t ...

  9. Zookeeper(四))持久化日志文件

    Zookeeper(四))持久化日志文件 持久化用途 存储两种文件 snapshot:内存快照 log:事务日志,类似MySQL的binlog,存储数据节点的操作日志 问题 序列化的本质其实就是将原数 ...

  10. 使用oracle数据库的开发流程