在使用 Vue 框架开发项目时，Element UI 是常用的组件库。最近在开发中遇到了 Element 单选框组件el-radio的双向绑定问题，直接复制element官网上的的案例下来也是不得，经过调试和探索，终于找到了解决方案，特此记录分享。
下图是官方文档的代码
一、问题描述
在一次编程中需要使用 Element 的单选框组件，于是直接复制了 Element 官网上的案例代码
然而在页面上呈现时，却出现了异常情况：要么选不了，要么多个同时选中，使用vue-devtool工具查看，双向绑定的值变成了空置，并不是我们设置的value的值
二、问题分析
经过仔细查阅 Element 组件文档和调试发现，el-radio组件实际上是通过label属性来指定当该单选框被选中时绑定值v-model应设置的值，而不是value属性。官方文档中的示例可能存在一定的误导性，或者是在特定版本中有不同的用法，导致直接复制代码后出现双向绑定失效的问题。
另外，当双向绑定的数据是对象类型时，在 Vue 3 中需要使用reactive函数来创建响应式对象，以确保数据的响应式效果。如果使用不当，也可能导致数据无法正确更新。
三、解决方案
将el-radio组件的value属性修改为label属性，代码如下：
<el-radio-group v-model="smsForm.messageType">
<el-radio label="1" border>手机短信</el-radio>
<el-radio label="2" border>邮箱</el-radio>
</el-radio-group>确保在定义包含双向绑定数据的对象时，使用reactive函数来创建响应式对象
const smsForm = reactive({
messageType: null
})至此问题解决
