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

在使用 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
})

至此问题解决

相关推荐
西陵1 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld1 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷3 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军3 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离3 小时前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库
whysqwhw3 小时前
鸿蒙工程版本与设备版本不匹配
前端
gnip4 小时前
http缓存
前端·javascript
我不只是切图仔4 小时前
我只是想给网站加个注册验证码,咋就那么难!
前端·后端
该用户已不存在5 小时前
macOS是开发的终极进化版吗?
前端·后端