在使用element-ui中的el-radio-group 赋值后 无法选中问题

文章讲述了在使用Element-UI的el-radio-group组件时遇到的赋值问题,问题在于混淆了label和:v-model的使用。解决方案是正确区分两者,当需要字符串时使用label,需要数字时使用:v-model。注意Vue中冒号前后的值类型差异。修复这个问题后,单选框在赋值后将能正确显示选中状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天在使用 element-ui 中的el-radio-group时,给表单赋值,遇到了赋值成功,但单选框不会自动选中的问题。

 但是点击别的单选框可以正常使用。

 找了很多资料后发现,是没有区分 label 和 :label l的用法,element-ui官网Radio单选框的使用中,基础用法使用的是label,radio的值是字符串;单选框组el-radio-group使用的是:label,radio的值是数字。这里我们很容易混淆对:label和label的使用。

 

 

可以看到,在使用 :label后,绑定的数字由红色变成了白色,原因是:在label属性中,这里的1和0是字符串,而在 :label中,1和0变成了数字。

注意:在Vue中,加冒号的属性,引号里的值一般为一个变量或者表达式,如果为常量时,常量值需忽略后面的引号;没加冒号的属性,值包括后面的引号部分。例如:

label=“1”,表示label的值为字符串1,v-model变量的值应为字符串;
:label=“1”,表示label的值为数字1,v-model变量的值应为数字;
:label=" ‘1’ ",表示label的值为字符串1,v-model变量的值应为字符串;

解决方案:如果你需要的是字符串,则只需要把 :label换成label即可,或者把:label=“1”,的1外面在加一个单引号,也是可以识别成字符串。如果你需要的是number,只需要使用:label即可。

最后在解决后,给redio赋值后,就会自动选中了:

注意:当你发现反显成功了, 但是重复点击新增不生效得时候可能是因为关闭表单得时候把默认值清空了。

 

 

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值