elementUi中的radio回显之后无法选择的问题

发布时间 2023-08-15 17:39:08作者: 阳光下的向日葵

情况:在用el-radio时,在回显数据之后,点击其他的radio想要选择的时候,勾选不了。

原因:接口返回数据中没有声明radio的对应变量,导致直接赋值给list中未声明的变量,所以双向绑定不会被vue监听,即没有刷新。=》vue中对数据双向绑定的支持限于基本添加删除的方法,详情看官网

解决方案:

1、原本是把从后台得到的数据res.data直接赋值给list,现在需要先把res.data赋值给let obj,然后再由obj赋值给editPowerForm,就可以了。(先赋值给obj,相当于radio在被赋值前已经被声明了,所以可以被双向绑定监听到)

2、直接给接口返回数据data中声明变量,然后再赋值给list。

eg:

<el-form-item label="特殊资源" prop="resource">
    <el-radio-group v-model="list.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>

js中:

data() {
      return {
        list: {
          resource: '',
          desc: ''
        },
    }
},
methods:{
  query(){
         edit(this.rowId).then((res) => {
             res.data['resource'] = "";//因为res.data中没有resource这一字段,若直接赋值会导致勾选不了
             this.list= res.data;  
         })
  },
}        

总:对象的某个属性要先被创建,才能被vue双向绑定监听到。

注意点: radio的值默认应该是string类型,如果后台返回的值是int类型,radio同样不会默认选中。

众所周知,在引用js对象时,引用的其实是一个索引地址,也因此前端才延伸出深拷贝浅拷贝的所在,当对象内只发生改变时,索引值其实是不变的,即旧值与新值相同,因为它们索引指向的都是同一个对象。

其实直接使用$set,或者watch进行深度监听也是可以的。庆幸的是,现在vue3中使用proxy代理来实现双向绑定,再也不用担心数组/对象发生变化却监听不到的问题了!



部分参考来源: