element-plus 单选组件 el-radio，选不上，又没报错，直接复制官网也不行解决方案

入行IT两年半2025-06-06 11:49

在使用 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属性，代码如下：

javascript 复制代码

          <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函数来创建响应式对象

javascript 复制代码

const smsForm = reactive({
  messageType: null
})

至此问题解决