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

至此问题解决

相关推荐
陈不知代码5 分钟前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记6 分钟前
sass中@mixin与 @include
前端·sass
陈琦鹏13 分钟前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数40 分钟前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante1 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam1 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8502 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏2 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪3 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾3 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite