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

至此问题解决

相关推荐
真的想不出名儿2 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊2 小时前
Polar WEB(1-20)
前端
笨蛋不要掉眼泪2 小时前
SpringBoot项目Excel成绩录入功能详解:从文件上传到数据入库的全流程解析
java·vue.js·spring boot·后端·spring·excel
吃饺子不吃馅3 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防3 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump3 小时前
前端部署工具 PinMe
运维·前端·开源
Baklib梅梅4 小时前
优秀文档案例解析:打造高效用户体验的最佳实践
前端·ruby on rails·前端框架·ruby
慧一居士4 小时前
VUE、jquery、React、Ant Design、element ui、bootstrap 前端框架的 功能总结,示例演示、使用场景介绍、完整对比总结
前端
GISer_Jing4 小时前
0926第一个口头OC——快手主站前端
开发语言·前端·javascript
MediaTea5 小时前
Jupyter Notebook:基于 Web 的交互式编程环境
前端·ide·人工智能·python·jupyter