<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. Kendo UI for jQuery使用教程:操作系统/jQuery支持等

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  2. Python语法汇总

    如果你之前学过任何一门编程语言,因为每种语言的基础语法要做的事情其实基本是相同的,只是表示方式或某些地方稍稍不同,因此在学Python的时候将它与其它你已经掌握的编程语言对比着学,这样学起来更快,效果 ...

  3. Python CGI编程Ⅶ

    简单的表单实例:GET方法 以下是一个通过HTML的表单使用GET方法向服务器发送两个数据,提交的服务器脚本同样是hello_get.py文件,hello_get.html 代码如下: 默认情况下 c ...

  4. C# 常用方法—— 32位MD5加密

    其他常用方法详见:https://www.cnblogs.com/zhuanjiao/p/12060937.html /// <summary> /// 32位MD5加密(小写) /// ...

  5. 手动升级 Confluence 6 - 升级问题解决

    升级失败了? 如果你需要对你的升级进行回退,你必须首先恢复你老的 Confluence 备份.不要尝试再次进行升级,也不要尝试再次对升级失败的 Confluence 进行再次启动.  在升级过程中遇到 ...

  6. HGOI 20190708 题解

    Problem A 拿出勇气吧 幸运数字每一位是$4$或者$7$,现在给出一个数字每位数位上数的和为n,求出最小的幸运数n 对于100%的数据,$n\leq 10^6$ Sol : 显然本题要求数的长 ...

  7. Lucas定理初探

    1.1 问题引入 已知\(p\)是一质数,求\(\dbinom{n}{m}\pmod{p}\). 关于组合数,它和排列数都是组合数学中的重要概念.这里会张贴有关这两个数的部分内容. 由于Lucas定理 ...

  8. jQuery_替换操作

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  9. axios多并发请求

    场景: 点击导出Excel按钮实现,姓名列表中前五个的所有的文章数据发送给后端,姓名列表中点击过的数据会被存放到localStorage中: 思路: 点击导出按钮,把前五个数据逐个和localStor ...

  10. Unity3D_(游戏)卡牌04_游戏界面

        启动屏界面.主菜单界面.选关界面.游戏界面 卡牌01_启动屏界面 传送门 卡牌02_主菜单界面 传送门 卡牌03_选关界面 传送门 卡牌04_游戏界面    传送门 选关界面效果 (源代码在文 ...