element编辑表单el-radio回显之后无法选择的问题解决
前言
提前说明哦，这是一篇很基础类的文章，只适合小小白阅读，因为以下文章内容来源于我刚入行时的笔记。各位高人请绕道，避免浪费时间，谢谢~
今天主要来谈一下element-ui编辑表单中的el-radio回显之后无法选择的问题，主要涉及到vue的双向绑定，以及element-ui编辑表单中的el-radio的默认类型。
问题
这是一个困扰了我半上午的bug，表单样式及代码如下。
问题是回显数据之后，当我点击其他的radio想要选择的时候，勾选不了。
在网上找到了一样的问题，有解决方案，同样没有找到原因。
网上的解决方案
原本是把从后台得到的数据res.data直接赋值给editPowerForm，现在需要先把res.data赋值给let obj，然后再由obj赋值给editPowerForm，就可以了。
原因是editPowerForm没有声明radio这一变量，vue中对数据双向绑定的支持限于基本添加删除的方法，详情看官网。在这里相当于直接赋值给未声明的变量，所以双向绑定不会被vue监听，即没有刷新。而先赋值给obj，相当于radio在被赋值前已经被声明了，所以可以被双向绑定监听到。
说的有点绕，总之就是对象的某个属性要先被创建，才能被vue双向绑定监听到。
还有需要注意的是：
radio的值默认应该是string类型，如果后台返回的值是int类型，radio同样不会默认选中。
总所周知，在引用js对象时，引用的其实是一个索引地址，也因此前端才延伸出深拷贝浅拷贝的所在，当对象内只发生改变时，索引值其实是不变的，即旧值与新值相同，因为它们索引指向的都是同一个对象。
其实直接使用$set，或者watch进行深度监听也是可以的。庆幸的是，现在vue3中使用proxy代理来实现双向绑定，再也不用担心数组/对象发生变化却监听不到的问题了！
到此这篇关于element编辑表单el-radio回显之后无法选择的问题解决的文章就介绍到这了,更多相关el-radio回显无法选择内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
一个基本类型的数据,想要变成响应式数据,那么需要通过ref函数包裹,而如果是一个对象的话,那么需要使用reactive函数,这篇文章主要介绍了Vue reactive函数2023-01-01
ant design vue datepicker日期选择器中文化操作
这篇文章主要介绍了ant design vue datepicker日期选择器中文化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue数组去重的12种方法示例全面详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要为大家介绍了前端面试之vue2和vue3的区别有哪些，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
vue实现图片下载点击按钮弹出本地窗口选择自定义保存路径功能
vue前端实现前端下载,并实现点击按钮弹出本地窗口,选择自定义保存路径,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
这篇文章主要为大家详细介绍了vue swipe自定义组件实现轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了VUE.CLI4.0配置多页面入口的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了Vue组件模板的几种书写形式(3种)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了vue数组中不满足条件跳出循环问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要给大家介绍了关于如何用Vue3切换中英文显示的相关资料,在Vue3中使用vue-i18n进行国际化设置,包括安装、配置、在组件中使用$t方法获取翻译字符串,以及可选的动态加载语言包以提高性能,需要的朋友可以参考下2024-11-11
最新评论