首页 > 其他分享 >elementUi中的radio回显之后无法选择的问题

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

时间:2023-08-15 17:46:06浏览次数:60  
标签:回显 elementUi res 绑定 list radio data 赋值

情况:在用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代理来实现双向绑定,再也不用担心数组/对象发生变化却监听不到的问题了!



部分参考来源: https://element.eleme.cn/#/zh-CN/component/form https://juejin.cn/post/6993939373968359431

 

标签:回显,elementUi,res,绑定,list,radio,data,赋值
From: https://www.cnblogs.com/redFeather/p/17631930.html

相关文章

  • 如何单独在js中引入elementUI的通知组件
    在页面上可以直接使用的通知:open1(){this.$notify({title:'成功',message:'这是一条成功的提示消息',type:'success'});}, 但是在单独的js当中使用时,会提示  .$notify未定义,原因是在单独的js当中未引入el......
  • elementUi table表格 标头自定义,给表头加点击事件
    <el-table-columnlabel="">  <el-table-columnprop="column":render-header="renderHeader"width="160">    <templateslot-scope="scope">      <span>{{scope.row.column[......
  • 使用elementui动态添加表单并校验
    elementui官网动态增减表单项的例子有几个地方容易被忽略<el-form:model="dynamicValidateForm"ref="dynamicValidateForm"label-width="100px"class="demo-dynamic"><el-form-itemprop="email"label="邮箱"......
  • elementui怎么给表格标题添加样式和文本
    如图所示,在elementUI需要在添加一个红色的“*”号来表示该内容是必填项。如何自定义elementui表格表头方法一:使用slot="header"自定义标头<el-table:data="tableData"style="width:100%"><el-table-columnlabel="Date"prop="date"></el-tabl......
  • VUE+ElementUI的表单验证二选一必填项,并且满足条件后清除表单验证提示
    上代码<el-form-itemlabel="出库单号"prop="ecode"ref="ecode":rules="rules.ecode"><el-inputv-model="queryParams.ecode"placeholder="出库单号和出库箱号至少填写一项"clearable......
  • elementui el-tree的使用方法
    el-tree一般用于节点下有很多子节点接口返回的数据格式,可以无线子节点deptOptions:[{"id":"1686631142746230785","label":"小王测试部门","children":[{"id&......
  • ElementUI的Upload组件上传时如何携带参数
    后端接口@PostMapping("/manual/import")@ApiOperation("手工导入")publicRtnResultmanualImport(@RequestParam("enterpriseGroupName")StringenterpriseGroupName,@RequestParam("file&q......
  • el-tree 父子节点勾选框:勾选时关联但回显时不关联
    需求之前的需求是el-tree父子节点勾选框半关联,但是现在需求改了,需要:勾选时父子节点关联;数据回显时,父子节点不关联。即:分析传参控制父子节点是否关联check-strictly父子节点是否关联是由check-strictly这个属性决定的:为false表示关联,为true表示不关联。回显......
  • 关于引用elementui中的el-date-picker组件
    最近有一个需求要用到elementui中的日期选择器组件,但是elementui中的不太满足,在网上找到一个引用里面的组件的教程https://blog.csdn.net/mouday/article/details/103932261但是引用完成后报错Moduleparsefailed:Unexpectedtoken(65:6)Youmayneedanappropriateloader......
  • Port XXX is already in use. xxxx..解决办法-gradio退出可用
    原因:端口被占用,程序启动后关闭但端口依然存在解决办法:手动杀死端口  1.安装工具(已经有的不需要安装,直接跳到第二步)yuminstallnet-tools-y命令介绍:yum:自动化简单化地管理rpm包的命令。install:安装net-tools:网络工具 2.安装完毕,执行查看端口命令: netstat-tpln......