解决 Element-UI 动态生成多个radio单选框时数据绑定失效问题

最新推荐文章于 2024-08-15 11:16:03 发布
最新推荐文章于 2024-08-15 11:16:03 发布
阅读量2.7k 收藏 1
点赞数 2
分类专栏： # JavaScript 前端 # Vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sayUonly/article/details/113738166
版权
在开发Vue应用时，遇到使用Element-UI动态生成多个radio单选框的问题，发现数据绑定失效，点击无反应。通过研究Vue API，了解到使用Vue.set方法能确保新增属性响应式。修改代码后，成功实现了数据绑定，解决了问题。
摘要由CSDN通过智能技术生成

开发需求制作调查问卷，问题为单选题。因此答案的数据绑定需要动态处理。

<el-radio-group v-model="answers[index]">
	<el-radio>...</el-radio>
</el-radio-group>


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  acgCode
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
vue+elementui动态表单值的绑定与校验

				
			

			

				

					小男哥的博客
				

				

					09-10
					
					4014
					
				

			

		

		

			
				
动态表单值的绑定与校验

我们都知道，为了让使用者更简单高效的开发，vue使用了表单元素双向绑定的模式。使用时每个表单元素都会在data中对应一个写死的变量，然后通过v-model进行绑定（v-model实现原理此处不做赘述，官网讲解很到位，面试基本会问到，请自行参考）。这种用法是最常用且易上手的，但是如果需求让我们做一个统一的组件，根据后端返回的json数据动态展示成相应的input、select、textarea、radio等元素，这种情况由于数据都是不确定的，之前的方法貌似有点行不通，怎么办呢？

假

			
		

	



                

              
                



	

		

			

				
					
Element-Plus el-radio-group 标签在使用时遇到绑定值失效的问题

				
			

			

				

					RanDoll_的博客
				

				

					03-26
					
					2327
					
				

			

		

		

			
				
Element-Plus el-radio-group 标签在使用时遇到绑定值失效的问题

			
		

	



                


  
              

                


	

		

			

				
					
动态修改el-radio的选中状态

					
最新发布

				
			

			

				

					qq_41148615的博客
				

				

					08-15
					
					232
					
				

			

		

		

			
				
每次选中后会将lable的值赋给selectedTypes。如果需要根据后端返回的数据定位el-tree节点，只需要将后端返回的name赋值给selectedTypes即可。在做项目过程中，需要用el-radio实现选择el-tree中的某个节点，并通过后端返回的数据定位到选择的节点。v-model为选中的值， label为单选框唯一的值。

			
		

	





	

		

			

				
					
element 框架 el-radio-group 赋值之后点击无效

				
			

			

				

					m0_37714008的博客
				

				

					06-13
					
					2774
					
				

			

		

		

			
				
当进行页面编辑给l-radio-group 赋值之后点击无效的问题。change事件里重新渲染一下页面就行了。el-radio在一组备选项中进行单选。

			
		

	



		

			
		



	

		

			

				
					
elementUI 框架中el-radio-group组件赋值之后，点击无效问题

				
			

			

				

					jieyucx的博客
				

				

					12-14
					
					2689
					
				

			

		

		

			
				
在绑定值变化触发的事件添加 this.$forceUpdate() 强制更新。

			
		

	





	

		

			

				
					
element vue 动态单选_vue.js选中动态绑定的radio的指定项

				
			

			

				

					weixin_33914982的博客
				

				

					12-23
					
					1256
					
				

			

		

		

			
				
绑定的数据和上文的model是一致的，选中radio或者checkbox需要注意的是：不管你的checked属性值是true或者false，他都会选中。选中不选中，不是看checked的属性值，而是看有没有checked这个属性，所以，动态选中，不用v-model,也不用checked='true'，判断是否需要渲染checked这个属性就好了.view 改一下："{{option.text}}"...

			
		

	





	

		

			

				
					
element-ui

				
			

			

				

					大菠萝
				

				

					03-27
					
					645
					
				

			

		

		

			
				
type="flex"，采用flex布局，搭配justify="center|end|space-between|space-around"，默认start。:xs、:sm、:md、:lg、 :xl，响应式布局，值是占有的份数。:gutter，间隙，不会占span的份数。:span，占的份数，共24份。:offset，偏移量。

			
		

	





	

		

			

				
					
elment ui 组件bug总结

				
			

			

				

					IT博客技术分享
				

				

					04-04
					
					3641
					
				

			

		

		

			
				
一、.element-ui dialog设置为点击弹窗以外的区域不关闭弹窗

第一种:
在el-dialog标签中添加:close-on-click-modal="false"即可


<el-dialog title="标题" :close-on-click-modal="false"  :visible.sync="dialogEnrol" width="30%">
  弹窗内容
</el-dialog>


第二种:全局设置


在mian.js里面：
import Elem.

			
		

	





	

		

			

				
					
Vue | Vue 核心 【模板语法 + 数据绑定 + MVVM模型 + 数据代理 + 事件处理 + 计算属性computed + 监视属性watch + 渲染+收集表单数据+过滤器 + 内置指令】

				
			

			

				

					不爱吃菜的菜菜的博客
				

				

					07-05
					
					732
					
				

			

		

		

			
				
官网Vue：一套用于构建用户界面的 渐进式 JavaScript框架
特点

采用组件化模式，提高代码复用率、且让代码更好维护



声明式编码，让编码人员无需直接操作DOM，提高开发效率



使用虚拟DOM + 优秀的Diff算法，尽量复用DOM节点。


搭建Vue开发环境
vue文件引入关掉Vue控制台提示Vue开发者工具添加到chrome扩展程序里面，就不显示第一个了
第二个提示框
阻止 vue 在启动时生成生产提示

容器的两个作用：区分JS表达式 和 JS代码(语句）表达式：一个表达式会产生一

			
		

	





	

		

			

				
					
iview学习帮助文档

				
			

			

				

					weixin_40885337的博客
				

				

					03-25
					
					3357
					
				

			

		

		

			
				
安装iview
npm install view-design --save

导入iview
在main.js中导入iview
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(ViewUI);

按需引用iview组件
a.安装babel
npm install babel-plugin-import --save-dev

b.在 .babelrc 文件中
{
  "plugins

			
		

	





	

		

			

				
					
el-radio校验规则不生效

				
			

			

				

					weixin_57696123的博客
				

				

					06-28
					
					2273
					
				

			

		

		

			
				
el-radio校验规则不生效




分析原因

el-radio默认的值是0，导致校验规则以为已经是选择过了，所以当没有选择的时候也不会报错


表单校验的几个注意的点

1.ref和model的值要保持一致 2. prop和v-model的名字要保持一致...

			
		

	





	

		

			

				
					
vue elementui 动态获取数据 遍历循环  生成el-radio-group

					
热门推荐

				
			

			

				

					chenacxz的博客
				

				

					11-29
					
					2万+
					
				

			

		

		

			
				
单选

先看一下单选实际效果图



点击编辑图标显示



单选框实际上是比较简单的。由于很多数据是从数据库里取出来的。先看一下我存入的数据格式，为了方便操作，我是单选一张表，多选一张表，当然也可以放在一起，我是为了灵活多用，避免数据混淆，出现bug,说到底就是不做那么多判断，太麻烦了




<el-card class="boxs-card">
            &lt...

			
		

	





	

		

			

				
					
【Vue系列】Element Radio组件label绑定的值不显示

				
			

			

				

					IU
				

				

					06-08
					
					2003
					
				

			

		

		

			
				
<el-radio v-model="radio" label="1"></el-radio>

会出现如图这种效果

这时候我们就想把“1”隐藏 ，这时候怎么做呢，可以用下面这种方法
 <el-radio v-model="radio" label="1">{{''}}</el-radio>





			
		

	





	

		

			

				
					
在vue中使用element的el-table和表单元素el-input或el-radio时失效的问题解决办法（已解决）

				
			

			

				

					sharleen84的博客
				

				

					01-23
					
					6889
					
				

			

		

		

			
				
el-table嵌套表单元素时，表单元素失效，也就是输入和点击无效时，是因为数据更新失效、试图更新失效。

原因可能是因为加入了新的对象属性，或者数据层级太深，官网有提到前面的情况，新加入的对象属性变更不会带来试图更新。

解决办法就是在表单元素上加入change方法：


<el-table-column label="见面">
  <template slot-scope="scope">
    <el-radio-group  v-model="scope.row.se

			
		

	





	

		

			

				
					
【ElementUI】【Vue】el-Radio失效，无法切换选中效果

				
			

			

				

					陶洲川的博客
				

				

					02-26
					
					1万+
					
				

			

		

		

			
				
一、问题
1.1、环境
电脑环境：Windows 10；
开发工具：IntelliJ IDEA；
数据库环境：Redis 3.2.100
JDK环境: Jdk1.8；
1.2、问题
【Vue】【ElementUI】为什么使用el-radio 标签失效？

使用el-radio标签，点击图中的【审核不通过】圆形单点框，没有反应，还是默认选中【审核通过】。
二、解答
1、这里有个坑，就是ElementUI和Vue.js框架配合使用的时候，不支持连点。
错误方法：
    //3 审核
    reviewSys

			
		

	





	

		

			

				
					
vuejs踩坑记录：element ui 表单回显 radio 动态赋值无效果的问题

				
			

			

				

					南北极之间
				

				

					02-21
					
					4535
					
				

			

		

		

			
				
对于动态赋值的Element-ui-radio要使用动态绑定赋值给label

也就是冒号赋值：




			
		

	





	

		

			

				
					
Vue+element动态循环radio单选按钮

				
			

			

				

					qq_39548550的博客
				

				

					06-14
					
					3670
					
				

			

		

		

			
				
vue+Element动态循环radio单选按钮

			
		

	





	

		

			

				
					
element-ui的radio单选框动态渲染

				
			

			

				

					weixin_73318685的博客
				

				

					03-10
					
					1692
					
				

			

		

		

			
				
根据后台返回的数据进行默认值绑定单选框选中，本文主要要注意的是radio的label值才是用户绑定后台定义的数据类型而不是value，其次是v-bind的正确使用。

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值