el-checkbox-group 选中后值为true和false遇到的坑

最新推荐文章于 2025-06-23 10:53:00 发布

一盘小菜er

最新推荐文章于 2025-06-23 10:53:00 发布

阅读量9.2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：使用说明文章标签： vue checkbox

本文链接：https://blog.youkuaiyun.com/qq_25537391/article/details/107532473

使用说明专栏收录该内容

6 篇文章

订阅专栏

在使用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">
<!-- 引入组件库 -->
<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>