element-ui编辑表单中的el-radio无法选择的情况

困扰了半上午的bug,表单样式及代码如下。
问题是回显数据之后,当我点击其他的radio想要选择的时候,勾选不了。
element-ui编辑表单中的el-radio无法选择的情况_第1张图片element-ui编辑表单中的el-radio无法选择的情况_第2张图片

在网上找到了一样的bug,有解决方案,同样没有找到原因。
解决方案是:原本是把从后台得到的数据res.data直接赋值给editPowerForm,现在需要先把res.data赋值给let obj,然后再由obj赋值给editPowerForm,就可以了。
原因是editPowerForm没有声明radio这一变量,vue中对数据双向绑定的支持限于基本添加删除的方法,详情看官网。在这里相当于直接赋值给未声明的变量,所以双向绑定不会被vue监听,即没有刷新。而先赋值给obj,相当于radio在被赋值前已经被声明了,所以可以被双向绑定监听到。
说的有点绕,总之就是radio要先被创建,才能被vue双向绑定监听到。
还有需要注意的是
:radio的值应该是string类型,如果后台返回的值是int类型,radio不会默认选中。

你可能感兴趣的:(JavaScript,vue,ES6)