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

Posted on by

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中的數組獨立出來！

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：