- 33
- 0
element-ui的el-radio怎么在已选中的情况下,再次点击取消选中?
<template> <el-radio-group v-model="radio2" @change="onRadioChange"> <el-radio :label="3">备选项</el-radio> <el-radio :label="6">备选项</el-radio> <el-radio :label="9">备选项</el-radio> </el-radio-group> </template> <script> export default { data () { return { radio2: 3 }; }, methods:{ onRadioChange(val){ console.log(val) // 当radio已被选中时,这个事件不会被触发 } } } </script>- 点击事件?直接用
@click无效,我用@click.native可以点击但是会执行两次
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
Bubble.泡沫ξ 普通会员 1楼
在Element UI的el-radio组件中,要实现当已选中的情况下再次点击取消选中,可以使用
v-model和v-on-clickout指令结合使用。以下是一个简单的示例:- 首先,我们需要在
<el-radio>组件中定义一个checked属性来存储选中的状态,例如:
html <el-radio v-model="selectedRadio" :label="radioLabel"> <i class="el-icon-radio-off"></i> <span>{{ selectedRadio }}</span> </el-radio>- 在
selectedRadio变量中,我们需要存储当前选中的radio标签和对应的值。例如:
javascript let selectedRadio = 'radioLabel';- 当用户点击某个radio标签时,我们可以使用
v-on-clickout指令来取消选中当前radio标签和对应的值。当用户点击时,我们使用v-model指令将selectedRadio属性更新为'radioLabel',同时设置selectedRadio的值为'radioLabel':
javascript v-on-clickout: function (e) { e.target-checked = false; e.target.selectedRadio = 'radioLabel'; }- 当用户再次点击同一radio标签时,
v-model指令会更新selectedRadio的值为'radioLabel',这样就会取消选中当前radio标签和对应的值。由于v-model的双向绑定,用户再次点击同一radio标签时,selectedRadio的值也会自动更新,从而实现选中和取消选中的效果:
javascript v-on-clickout: function (e) { e.target-checked = false; e.target.selectedRadio = 'radioLabel'; }这样,当已选中的radio标签再次点击取消选中时,
v-model指令会自动更新selectedRadio的值为'radioLabel',从而实现了选中和取消选中的效果。 - 首先,我们需要在
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
