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中的数组独立出来!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。

使用el-checkbox-group选中后值为true和false遇到的坑的更多相关文章

  1. swift – 检查可选Bool的值

    如果我使用可选Bool,我总是需要做如果boolean==true?因为Optionals不再符合BooleanType,编译器不知道我想检查Bool的值吗?

  2. 将可选的回调传递到Swift函数

    我学习SwiftLang,但我不能传递可选的回调参数到函数:这给我一个错误–Type()–>Void不符合协议“LogicValue”有什么建议么?将完成参数声明为可选闭包!和实际上标记为已弃用。

  3. 比较NSIndexPath Swift

    如果我为UITableView声明了一个NSIndexPath常量,使用==运算符进行比较是否有效?我假设,因为它的工作,NSIndexPath对象上的==运算符是比较部分和行属性而不是实例。我们来做一个非常简单的测试:是的,可以安全地使用==与NSIndexPath作为一个附注,在Swift中的==总是值得比较。===用于检测何时两个变量引用完全相同的实例。有趣的是,indexPath1===indexPath2显示,NSIndexPath被构建为在值匹配时共享同一个实例,所以即使你在比较实例,它仍然是

  4. jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法

    下面小编就为大家带来一篇jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法。

  5. jquery根据name取得select选中的值实例(超简单)

    下面小编就为大家分享一篇jquery根据name取得select选中的值实例(超简单),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  6. jquery radio 动态控制选中失效问题的解决方法

    下面小编就为大家分享一篇jquery radio 动态控制选中失效问题的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  7. 详解php中curl返回false的解决办法

    这篇文章主要介绍了php中curl返回false的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  8. AngularJS select加载数据选中默认值的方法

    下面小编就为大家分享一篇AngularJS select加载数据选中默认值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  9. jQuery判断checkbox选中状态

    这篇文章主要介绍了jQuery判断checkbox选中状态的相关资料,非常具有参考借鉴价值,感兴趣的朋友一起学习吧

  10. jQuery实现点击行选中或取消CheckBox的方法

    这篇文章主要介绍了jQuery实现点击行选中或取消CheckBox的方法,涉及jQuery针对页面元素的循环遍历与属性操作相关技巧,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部