elementui单选框回显数据,element radio-group点击无效

　　今天主要讲el-radio在element-ui编辑表单中回显后无法选择的问题，主要涉及vue的双向绑定和element-ui编辑表单中el-radio的默认类型。有兴趣的可以了解一下。

目录

　　前言在线解决方案

前言

　　提前说明，这是一篇很基础的文章，只适合小小白看，因为下面这篇文章来自我刚入行时的笔记。请绕道行驶以免浪费时间，谢谢~

　　今天主要讲的是element-ui编辑表单中el-radio回显后无法选择的问题，主要涉及vue的双向绑定和element-ui编辑表单中el-radio的默认类型。

问题

　　这是一个困扰我半个上午的bug。表单样式和代码如下。

　　问题是在回波数据之后，当我点击其他电台选择时，我无法检查它。

　　我在网上也发现了同样的问题，有解决的办法，但是我也没有找到原因。

网上的解决方案

　　原来后台获取的数据res.data是直接赋给editPowerForm的。现在需要先把res.data赋给let obj，再由obj来编辑PowerForm。

　　原因是editPowerForm没有声明变量radio，vue对双向数据绑定的支持仅限于基本的添加和删除方法。详见官网。这里相当于直接给未声明的变量赋值，所以双向绑定不会被vue监控，也就是没有刷新。先给obj赋值相当于先声明radio再赋值，所以可以通过双向绑定来监控。

　　有点绕了。简而言之，在vue双向绑定监控对象之前，必须创建对象的属性。

　　还应该指出的是：

　　默认情况下，radio的值应为string。如果后台返回的值是int，默认情况下不会选择radio。

　　众所周知，在引用js对象时，引用实际上是一个索引地址，所以前端延伸出了深拷贝和浅拷贝。当对象中只发生变化时，索引值实际上是不变的，即旧值与新值相同，因为它们都指向同一个对象。

　　其实也可以直接用$set或者watch进行深度监控。好在vue3现在用proxy代理实现双向绑定，不用担心数组/对象变化却无法监控的问题！

　　关于元素编辑表单的el-radio echo后无法选择问题的解决方案，本文到此为止。更多el-radio echo无法选择的相关内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。