el-radio标签被选中不显示问题，单击无效

已于 2022-11-15 20:04:12 修改
阅读量2.2k 收藏 3
点赞数 3
文章标签： vue
于 2022-11-15 16:22:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_71851186/article/details/127867979
版权

可以看到是否外链和是否缓存没有被选中，但是左侧的控制台打印出值

我们看到单选框已经被选中了，但是没有显示

解决办法

 在赋一次值，这样就可以显示在页面上了

改正

由于我的值是从后端获取的是字符串类型

 （此时是另一个表单）

不能用数字来赋值，要加单引号

 双向绑定要用双引号加单引号的方式来绑定 "  '  值  '  "

御坂251
关注
Ext.Net 1.x_Ext.Net.常用控件属性集合
德仔
09-14 5298
转自：http://blog.youkuaiyun.com/lulu_jiang/article/category/669748  Ext_数字输入框_Ext.form.NumberField: /* Ext.form.NumberField独有配置表: allowDecimals             Boolean             是否允许输入小数(默认true) allo
Vue基础6天实施笔记
weixin_44867717的博客
02-09 2042
Vue 基础课程 课程介绍 Vue基础语法 指令、过滤器、按键修饰符、生命周期、自定义指令、computed计算属性、watch监听器 axios、ES6模块化、组件、vue单文件组件、WebStorage SPA单页应用、router路由、Promise VueCLI脚手架、element-ui组件库、eslint代码规范检测等等 vue介绍 三大前端框架 Vue Vue.js (view)是一...
Radio 单选JS动态添加的选项onchange事件无效的解决方法
11-27
//记一个问题（已经解决2016.5.5） //在公司项目中遇见一个添加单选项的需求，采用ajax一步请求。为节约资源添加后不刷新网页，js动态改变页面 //当选择到动态添加的单选项，执行绑定事件 radio 单选JS动态添加的选项,onchange事件无效。使用delegate（）函数可以解决该问题！！！ delegate(): delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。 语法 $(selector).deleg
【ElementUI】【Vue】el-Radio失效，无法切换选中效果
热门推荐
陶洲川的博客
02-26 1万+
一、问题 1.1、环境 电脑环境：Windows 10； 开发工具：IntelliJ IDEA； 数据库环境：Redis 3.2.100 JDK环境: Jdk1.8； 1.2、问题 【Vue】【ElementUI】为什么使用el-radio 标签失效？ 使用el-radio标签，点击图中的【审核不通过】圆形单点框，没有反应，还是默认选中【审核通过】。 二、解答 1、这里有个坑，就是ElementUI和Vue.js框架配合使用的时候，不支持连点。 错误方法： //3 审核 reviewSys
vue2 element-ui 中 el-radio 单选框点击事件失效问题
最新发布
liuguowei14的博客
04-17 1183
点进这篇文章的小伙伴，应该和博主一样，都是遇到了这种单选框可点击取消的需求。也就只有这种不同寻常的需求，才能让我们发现element框架的缺陷点，话不多说，下面博主来提供一个解决思路。
el-radio无法默认选中，点击无反应问题
qingrunhao的博客
07-13 3805
【代码】el-radio无法默认选中，点击无反应问题。
el—radio不能选中和点击没反应的解决
weixin_45695485的博客
12-16 8959
环境:vue2 在el-radio中，要注意lable绑定的是哪个，是在data中的sex或者是ruleForm.sex
elenemt ui 单选框
qq_36010613的博客
11-12 735
radio 单选 由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。 <template> <el-radio v-model="radio" label="1">备选项</el-radio> <el-radio v-model="radio" label="2">备选项</el-radio> </te...
el-tree组件说明汇总，实现过滤筛选、添加、编辑、删除、选中节点功能等
weixin_44770377的博客
07-08 5250
使用el-aside和el-main布局，实现el-tree和el-form相结合的左树右表结构。表单参照Form 表单使用，下面主要说明el-tree的常见使用方法： <el-aside> <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> <el-button type="primary" icon="el-icon-plus" size="small" @click="
前端三件套知识点
二氧化硅.的博客
01-11 2880
前端三件套知识点
前端速成教程（HTML、CSS、JS、Vue…）
https://www.hyperplasma.top
05-06 3698
JavaWeb开发 SSM框架基础 前端速成——HTML、CSS、JS、Vue、Ajax、前端工程化。Web技术教程：W3Schoo。Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。Vue-cli是Vue官方提供的一个脚手架，用于快速生成Vue项目模板。
type=radio增加onclick没有效果_影响UV光解催化技术处理效果的主要因素
weixin_39803207的博客
11-14 127
影响UV光解催化技术处理效果的主要因素 1、废气浓度的影响： 对于20.200PPM以下的浓度效果较好，随着VOCs浓度增高，降解效率也会随之降低。目前广泛采用的是185nm和254nm两个波段的真空紫外灯，这是由于真空紫外灯发射的紫外线能量强度有限，单位时间内光解能量不足，效率下降。所以单纯的增加灯管的数量是无法解决高浓度有机气体问题，紫外光解技术不适合中高浓度VOCs气体。 2、相对湿度低的影...
vue中el-radio无法默认选中
qq_44971069的博客
01-15 2537
按若依生成的代码,reset方法中会把所有字段默认初始值为null,所以按element官方示例把初始值写在form中是不生效的。把默认值写在reset方法中,当打开页面时先执行这个方法,页面上不生效，默认什么都不选中。
在使用element-ui中的el-radio-group 赋值后 无法选中问题
m0_70871712的博客
07-19 7799
给表单赋值，遇到了赋值成功，但单选框不会自动选中的问题。
＜el-radio＞无法选中问题
m0_60428941的博客
12-15 1434
<el-radio>无法选中问题
elementUI - 关于el-radio值选项不回显问题的知识点
巫小婆的博客园~
09-25 3226
划重点： label值是动态的 需要加冒号： label 中定义的值类型 需要与你定义的值类型 和后台返回的值类型保持一致。如果是Number 就都是number，是string 就都是string，否则不显示。 正确代码示例： <template> <el-radio v-model="radio" :label="1">备选项</el-radio> <el-radio v-model="radio" :label="2">备选项</el-
react radio onchange事件点击无效
weixin_30439067的博客
01-26 2371
记： 　　项目需求： 页面中radio默认选中 第一次进去页面 点击radio的时候不管怎样点击 都是选中 连onChange事件都没触发 进入页面 点击刷新点击radio的时候 就能触发onChange事件了 不知道react中的radio 触发是什么梗 　　　　 ...
vue弹出的添加信息组件中 el-radio 单选框无法点击问题
yssa1125001的博客
04-03 845
在弹出的添加信息的组件中的form中有一个单选框,单选框无法进行点击切换
el-radio值无法回显
qq_40001822的博客
11-07 667
首先检查:label :绑定一个动态变量 其次label为number类型可以直接回显，为string类型需要在最外层再加一层单引号 <el-radio :label='"0"'>否</el-radio>
el-radio标签取消选中
01-09
### 如何在Element UI中取消选中`el-radio`单选框 为了实现`el-radio`组件可以被再次点击而取消选中的效果，在Vue3与Element Plus环境中，一种方法是在模板内通过监听点击事件并阻止其默认行为来间接控制单选按钮的状态变化。具体来说： 当使用`<el-radio>`标签时，可以通过给它绑定一个自定义的v-model变量以及添加@click.prevent修饰符的方式处理点击事件[^2]。 ```html <template> <div id="app"> <!-- row.Id 是每一行数据唯一的标识 --> <el-radio size="large" :label="row.Id" v-model="selectedId" @click.prevent="toggleSelection(row)" > {{ row.name }} </el-radio> </div> </template> <script setup> import { ref } from 'vue'; // 假设这是你的表格行之一的数据结构 const rows = [ { Id: 1, name: "Item One" }, { Id: 2, name: "Item Two" } ]; let selectedId = ref(null); function toggleSelection(row) { if (selectedId.value === row.Id) { // 如果当前已选则清除选择 selectedId.value = null; } else { // 否则更新为新的选择项ID selectedId.value = row.Id; } } </script> ``` 上述代码片段展示了如何创建可取消的选择机制。每当用户点击某个radio按钮时，会触发`toggleSelection()`函数检查是否已经选择了相同的项；如果是，则将其设置为空（即取消选择），如果不是，则正常切换到新选项上。 另外还有一种思路是采用`el-checkbox`替代`el-radio`以获得更灵活的行为模式，因为复选框天然支持点击一次选中、再点一次取消的功能特性[^3]。不过这种方法取决于实际应用场景需求是否允许这种变更。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值