[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单选框 单选框具有 ...
随机推荐
- idea无法创建javaclass文件
一直用pycharm和jupyter. 今天发现打开IDEA 创建一个新的java项目(maven)后无法在里面的module中创建相应的java class文件 解决方案: (1)选择 File—— ...
- 智能指针之shared_ptr基本概述
1.shared_ptr允许有多个指针指向同一个对象,unique_ptr独占所指向的对象. 2.类似于vector,智能指针也是模板.创建智能指针: shared_ptr<string> ...
- tomcat 散点杂记
tomcat有很多细碎的知识点和一些坑点,我将再次记录 域名直指项目 我们经常访问项目都要带上项目目录 eg: http://xwiki.test.com/xwiki or http://jenkin ...
- 删除全局安装的npm包
方法一 : 使用命令 npm uninstall -g 包名 方法二: 直接找到对应包删除 C:\Users\自己用户的文件夹\AppData\Roaming\npm 将对应的包删除即可
- Authing新功能——小程序扫码登录
近期,Authing 发布了新功能--小程序扫码登录. 小程序扫码登录指使用Authing小程序身份管家在网页端或其它客户端执行微信登录,目前的SDK仅支持客户端JavaScript.其它语言若想使用 ...
- Docker入门-数据挂载
Docker数据管理 在容器中管理数据主要有两种方式: 数据卷(Volumes) 挂载主机目录(Bind mounts) 数据卷 数据卷是一个可供一个或多个容器使用的特殊目录,它绕过UFS,可以提供很 ...
- 第十四周课程总结&记事本功能的简单实现。
(1)课程总结: 这周简单学习了下JDBC的内容: JDBC API 允许用户访问任何形式的表格数据,尤其是存储在关系数据库中的数据. 执行流程: (1)连接数据源,如:数据库. (2)为数据库传递查 ...
- eclipse安装错误的解决办法
eclipse安装错误的解决办法 Eclipse 是一个集成开发环境,如Java,C,C++,PHP等安装Eclipse首先得先安装java的Jdk或者Jre 首先访问https://www.ecli ...
- 百度echars 插件 横坐标信息倾斜显示
只需要 在xAxis 中加入 axisLabel:{ interval:0,//横轴信息全部显示 ...
- docker 安装kafka(快速)
下载镜像 docker pull wurstmeister/zookeeper docker pull wurstmeister/kafka 启动镜像 docker run -d --name zoo ...