溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“使用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>checkbox-group中的v-modle要單獨一個數組對象，不能作為表單對象，ruleForm中的一個屬性值，提交表單時，將數組對象處理一下，賦值給ruleForm表單對象就可以了！
出現這個問題的原因經過排查，是因為在其它的代碼里把ruleForm中的v-modle的數組屬性的類型轉了，當時沒有發現，后來排查發現了，所以checkbox-group中的v-modle是可以直接使用ruleForm中的屬性，但是需要注意的是必須是數組且，不要轉換了。
如果實在是要轉換那就可以將v-modle中的數組獨立出來！
感謝各位的閱讀，以上就是“使用el-checkbox-group選中后值為true和false遇到的坑怎么解決”的內容了，經過本文的學習后，相信大家對使用el-checkbox-group選中后值為true和false遇到的坑怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
