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回显无法选择内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • ElementUI radio组件选中小改造

    ElementUI 是自己比较钟爱的一套 vue 组件库,自己好几个项目里都在用它.一直以来这些丰富的组件,让我能快速的搞定各种后台管理页面,极大地提高了工作效率. 但是不管什么软件,肯定都没办法称之为完美,而最近的几个小需求中,也发现了 element ui 的一些不足(也可能是因为自己的需求比较奇葩吧).其中一点就是本文要提到的,radio 绑定对象类型值的问题. 具体现象就是,当通过 mapState 方法自动一个计算对象数组,然后将它绑定到 el-radio 上时,el-radio-gr

  • element-ui循环显示radio控件信息的方法

    如下所示: <el-form-item label="线路类型:" prop="isGive"> <el-radio-group v-model="currentLine.isGive"> <el-radio :label="item.id" :key="item.id" v-for="item in isGive" >{{item.name}}<

  • elementUi vue el-radio 监听选中变化的实例代码

    elementUi vue el-radio 监听选中变化的实例代码如下所述: //change是radio-group标签的事件 <div> <el-radio-group v-model="radioSex" @change="changeHandler"> <el-radio class="radio" label="man">男</el-radio> <el-rad

  • element编辑表单el-radio回显之后无法选择的问题解决

    element编辑表单el-radio回显之后无法选择的问题解决

    目录 前言 问题 网上的解决方案 前言 提前说明哦,这是一篇很基础类的文章,只适合小小白阅读,因为以下文章内容来源于我刚入行时的笔记.各位高人请绕道,避免浪费时间,谢谢~ 今天主要来谈一下element-ui编辑表单中的el-radio回显之后无法选择的问题,主要涉及到vue的双向绑定,以及element-ui编辑表单中的el-radio的默认类型. 问题 这是一个困扰了我半上午的bug,表单样式及代码如下. 问题是回显数据之后,当我点击其他的radio想要选择的时候,勾选不了. 在网上找到了一

  • element的表单元素使用总结

    element的表单元素使用总结

    表单元素挺多的,这里简单总结下,我以我的方式主要分为:文本框类.选择类.其他类 文本框类 选择类 其他类 TL;DR 时间类的选择器,均可设置输入框的显示样式和值的形式,属性分别为format.value-format 单选框和复选框,选中项属性的label值就是model的值 复选框,如果是多选的话,务必设置model值是数组 文本框类 这里我统一将有文本框的元素放在一起.主要有:普通文本框.密码框.文本域.计数器.日期选择器.自动填充文本框.有前缀的文本框. 普通文本框:disabled是否

  • vue+element实现表单校验功能

    要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能: 实现这个功能,总共分为以下4布: 1.在el-form标签中定义:rules="rules";ref="reference" 2.在el-form-item定义prop="name"; 3.在选项data中定义rules校验规则; 4.在提交方法中检查用户行为 templa

  • react的ui库antd中form表单使用SelectTree反显问题及解决

    目录 react ui库antd中form表单使用SelectTree反显问题 最近遇到这个问题,后来找到原因 react antd form表单回显踩坑 需求如下 总结 react ui库antd中form表单使用SelectTree反显问题 最近遇到这个问题,后来找到原因 1.formItem 需要使用initialValue赋值. 2.这个组件需要一开始就存在不能是条件渲染,非要用条件渲染需要让它先显示,然后根据条件让它不显示. 例子: state={  treeList:[],  sho

  • 解决layui 表单元素radio不显示渲染的问题

    最近一直在使用layui,一个对程序员相对友好的前端框架,很多效果都进行了初步的封装. 在使用过程中遇到最多的问题就是引用的问题,各种模板无法使用,虽然都一一百度解决. 本次需要解决的问题是 layui-form表单无法渲染效果. 我希望的效果是 但是程序运行效果是 问题分析: 因为这个表单,我是使用laytpl动态插入的,因此表单中radio的效果并没有渲染上,打开调试模式可以看到 正常的radio渲染结果,应该是包括一个i标签和一个span标签 而我们的渲染结果,只有一个input标签 所以

  • 解决vue+ element ui 表单验证有值但验证失败问题

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item label="数据模板" prop="template" > <el-col :span="20"> <el-input type="textarea" v-model="form.template

  • element自定义表单验证上传身份证正反面的实现

    element自定义表单验证上传身份证正反面的实现

    大概是这个样式 两个上传组件写在一个form-item里进行自定义表单验证 每次验证,通过判断上传组件绑定的值进行判断,callback不同的提示错误 <template> <div> <el-form :model="personalForm" :rules="rules" ref="personalForm" label-width="180px"> <el-row> <

  • vue3.0中使用element UI表单遍历校验问题解决

    vue3.0中使用element UI表单遍历校验问题解决

    问题 在使用vue3.0写项目的时候遇到一个需要遍历的表单,可以增加删除表单对象 不考虑校验问题的话,就是简单的数组包form对象.涉及校验的时候,按照以往的写法就是绑定ref值,然后调用组件的validate方法[form表单中配置rule规则]. 解决方法就是将数组内嵌在一个对象中,对象的结构跟我们定义的form对象结构一致 //我们需要遍历的form对象数组 const arr = [ { name:'', sex:'', age:'', },{ name:'', sex:'', age:

  • 解决element ui cascader 动态加载回显问题

    elementui是基于vue2.0的组件库,专为开发人员.设计人员而设计的:可以快速搭建项目框架,集成了界面样式,先给大家介绍下element ui cascader 动态加载回显问题解决方法. props: { lazy: true, async lazyLoad(node, resolve) { } } 但是当我赋值给cascader的时候,cascader却不显示了.只要重新加载下cascader组件就行. <el-cascader v-if="isShowAddressInfo&

  • Vue系列之Element UI表单自定义校验规则

    目录 一.表单效验规则的使用 1.自定义效验规则介绍 2.绑定效验方法 3.添加效验 4.效验判断 5.清除效验规则 二.常见表单效验规则 (一)pattern验证 (二)validator.js文件中常见的验证方法 总结 一.表单效验规则的使用 1.自定义效验规则介绍 是否必填: required: true  ||   fasle 效验消息提示:message: "提示信息" 效验触发方式:trigger:"change"  ||  "blur&quo

随机推荐