Vuejs Select all
use vuejs to achieve the all selection function. Select all buttons have default values, and you need to determine the number of radio buttons in advance. If all radio buttons are selected, all buttons are selected, otherwise they are not selected.
<div id="app">
<div class="box">
<div class="title"><label><input type="checkbox" v-model="checkAllStatus" @click="allCheck"></label></div>
<ul>
<li v-for="item,index of list"><label><input type="checkbox" v-model="item.checked" >{{item.title}}</label></li>
</ul>
</div>
</div>
var list = [
{
title : "",
checked : true,
},{
title : "",
checked : true,
},{
title : "",
checked : true,
},{
title : "",
checked : true,
},{
title : "",
checked : true,
}];
var vm = new Vue({
el : "-sharpapp",
data : {
list:list
},
computed : {
checkAllStatus : function(){
return this.list.filter( item => item.checked ).length === this.list.length ? true : false
}
},
methods : {
allCheck : function(){
let self = this;
this.list.map(function( item ){
item.checked = self.checkAllStatus;
return item;
});
}
}
});
the problem now is that changing the state of the select all button after initialization will report an error. May I ask how to deal with this situation
the reason for reporting an error is that your 'checkAllStatus' is obtained through computed, but it is bound in input. Click checkbox, to set the value of' checkAllStatus', but you do not set the set method in computed, so it causes an error
.
you only need to set the all-selected method 'allCheck'' directly to 'checkAllStatus' 's set method;
<div id="app">
<div class="box">
<div class="title"><label><input type="checkbox" v-model="checkAllStatus" ></label></div>
<ul>
<li v-for="item,index of list"><label><input type="checkbox" v-model="item.checked" >{{item.title}}</label></li>
</ul>
</div>
</div>
<script>
var list = [
{
title : '',
checked : true,
},{
title : '',
checked : true,
},{
title : '',
checked : true,
},{
title : '',
checked : true,
},{
title : '',
checked : true,
}];
var vm = new Vue({
el : '-sharpapp',
data : {
list:list
},
computed : {
checkAllStatus:{
get(){
return this.list.filter( item => item.checked ).length === this.list.length ? true : false
},
set(value){
this.list.map(function( item ){
item.checked = value;
return item;
});
}
}
},
methods : {
}
});
</script>
copy code to test locally
No error is reported.
slightly modified:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="box">
<div class="title"><label><input type="checkbox" v-model="allChecked" @click="allCheck"></label></div>
<ul>
<li v-for="(item,index) of list"><label><input type="checkbox" v-model="item.checked" >{{item.title}}</label></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var list = [
{
title : '',
checked : true,
},{
title : '',
checked : true,
},{
title : '',
checked : false,
},{
title : '',
checked : true,
},{
title : '',
checked : true,
}];
var vm = new Vue({
el : '-sharpapp',
data : {
list:list,
allChecked: false
},
methods : {
allCheck : function(){
let self = this;
this.list.map((item) => {
item.checked = !self.allChecked;
});
}
}
});
</script>
</body>
</html>
