Element-Plus el-radio-group 标签在使用时遇到绑定值失效的问题

一、问题描述

代码完全是按照官方文档书写,但是在选项点击后发生选项被全部选中,并且无法取消的情况。

<el-radio-group v-model="radio">
  <el-radio :value="3">Option A</el-radio>
  <el-radio :value="6">Option B</el-radio>
  <el-radio :value="9">Option C</el-radio>
</el-radio-group>
const radio = ref(3)

点击前:
在这里插入图片描述

点击后:
在这里插入图片描述

二、解决方法

遇到该问题后我给el-radio-group标签绑定了change事件用来查看每次点击时被更新的radio值,然后发现每次更新值都是空字符串,并且这个时候每个选项也会被选中,但是代码里选项明明绑定的值是3,6,9,为什么值为空字符串时会被选中值呢,于是我开始怀疑代码中绑定的value值是否正确生效了,同时,我想起了官网文档中的一条提醒:在这里插入图片描述
然后我查看了package中使用的element版本:在这里插入图片描述

这样就搞清楚了,由于是同事进行的项目初始化,他直接将以前的项目的框架部分复制过来了,所以导致value绑定值的写法在所使用的element版本中还未生效,只要将value改成老的api label就可以正常运行了。

<el-radio-group v-model="radio">
  <el-radio :label="3">Option A</el-radio>
  <el-radio :label="6">Option B</el-radio>
  <el-radio :label="9">Option C</el-radio>
</el-radio-group>
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值