使用el-checkbox-group选中后值为true和false遇到的坑
el-checkbox-group选中后值为true和false的坑
在使用el-checkbox-group设置复选框组的时候,会遇到设置的label值不显示,点击某一选项后,所有值都会选中的情况。
是因为在定义绑定值时,格式出现了问题
<p>checkList:{{ checkList }}</p> <el-checkbox-group v-model="checkList"> <el-checkbox label="复选框 A"></el-checkbox> <el-checkbox label="复选框 B"></el-checkbox> <el-checkbox label="复选框 C"></el-checkbox> </el-checkbox-group>
如果将checkList赋值[],则选中结果为数组,若此时将checkList:赋值为字符串,则会出现上述问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" > <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <p>checkList:{{ checkList }}</p> <el-checkbox-group v-model="checkList"> <el-checkbox label="复选框 A"></el-checkbox> <el-checkbox label="复选框 B"></el-checkbox> <el-checkbox label="复选框 C"></el-checkbox> </el-checkbox-group> <p>checkListBloone:{{ checkListBloone }}</p> <el-checkbox-group v-model="checkListBloone"> <el-checkbox label="1"></el-checkbox> <el-checkbox label="2"></el-checkbox> <el-checkbox label="3"></el-checkbox> </el-checkbox-group> </div> <script> new Vue({ el: '#app', data: { checkList: [], checkListBloone:'' } }) </script> </body> </html>
element ui中el-checkbox-group点击一个全部选中问题
原因是
checkbox-group中的v-modle要单独一个数组对象,不能作为表单对象,ruleForm中的一个属性值,提交表单时,将数组对象处理一下,赋值给ruleForm表单对象就可以了!
出现这个问题的原因经过排查,是因为在其它的代码里把ruleForm中的v-modle的数组属性的类型转了,当时没有发现,后来排查发现了,所以checkbox-group中的v-modle是可以直接使用ruleForm中的属性,但是需要注意的是必须是数组且,不要转换了。
如果实在是要转换那就可以将v-modle中的数组独立出来!
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/qq_25537391/article/details/107532473
相关文章
- 这篇文章主要介绍了intelliJ IDEA 多行选中相同内容的快捷键分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-06
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25SpringBoot2.x中management.security.enabled=false无效的解决
这篇文章主要介绍了SpringBoot2.x中management.security.enabled=false无效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-07-23- 这篇文章主要介绍了C#实现将选中复选框的信息返回给用户的方法,涉及C#针对复选框操作的相关技巧,需要的朋友可以参考下...2020-06-25
JS中的==运算: [''] == false —>true
这篇文章主要介绍了JS中的==运算: [''] == false —>true的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-29- 这篇文章主要介绍了java删除文件时总是返回false,删不掉的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-09-10
- C#给picturebox控件加图片选中状态的2个方法,需要的朋友可以参考一下...2020-06-25
asp.net中ListBox 绑定多个选项为选中及删除实现方法
文章介绍了关于在asp.net中的listbox的绑定多个选项和同时选中多个选项以及删除多个选项的方法...2021-09-22- PHP中当变量为0时,该变量同时也就“等于”false,那么如何区别0和false?这在有些条件语句中就很有用了,本文将举例说明。 首先看代码: 本代码的功能是查找一个字符串中...2016-11-25
浅谈@RequestParam(required = true)的误区
这篇文章主要介绍了@RequestParam(required = true)的误区,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-11-05- 这篇文章主要介绍了jQuery判断checkbox选中状态的相关资料,非常具有参考借鉴价值,感兴趣的朋友一起学习吧...2016-05-14
浅谈Python里面None True False之间的区别
这篇文章主要介绍了浅谈Python里面None True False之间的区别,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-09- 这篇文章主要介绍了jquery获取select选中值的方法,结合实例详细分析了jQuery获取select选中项option文本值及value值的方法,同时给出了JavaScript获取select选中项的技巧,需要的朋友可以参考下...2015-12-24
解决Keras TensorFlow 混编中 trainable=False设置无效问题
这篇文章主要介绍了解决Keras TensorFlow 混编中 trainable=False设置无效问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-29- 这篇文章主要给大家介绍了关于ng-repeat中Checkbox默认选中的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22
Python os.path.exists()函数总是返回false的解决方案
这篇文章主要介绍了Python os.path.exists()函数总是返回false的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-15CheckBox控件默认选中,提交时永远获得选中状态的实现代码
下面小编就为大家带来一篇CheckBox控件默认选中,提交时永远获得选中状态的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-09-22- 在gridview 列表中,需要添加如下效果,如果经过时变色,移开时还原成以前的颜色,行选中时通过加深色,从而知道选中了哪行...2021-09-22
- 这篇文章主要介绍了vue实现点击选中取消切换,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2022-06-01
- 这篇文章主要介绍了使用vxe-table合并单元格后增加选中效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2022-09-16