使用el-checkbox-group選中后值為true和false遇到的坑

更新時間：2022年07月07日 11:28:07 作者：qq_25537391

這篇文章主要介紹了使用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"  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>