一、问题描述
代码完全是按照官方文档书写,但是在选项点击后发生选项被全部选中,并且无法取消的情况。
<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>