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
})

至此问题解决

相关推荐
ai小鬼头14 分钟前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫1 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim1 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心1 小时前
vben 之 axios 封装
前端·javascript·学习
遗憾随她而去.1 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09012 小时前
浅析Web存储系统
前端
喜欢敲代码的程序员2 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
foxhuli2292 小时前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔3 小时前
CSS实现百分比水柱图
前端·css