使用vuejs实现全选功能,全选按钮有默认值,需要提前判断单选按钮的个数,如果单选按钮选全部选中,全选按钮选中,否则不选中。
<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 : '#app',
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;
});
}
}
});
现在的问题是,在初始化后改变全选按钮状态会报错。请问这种情况该如何处理
报错的原因是,你的‘checkAllStatus’是通过computed来获取的,但是绑定在了input里面;点击checkbox,设置了‘checkAllStatus’的值,但是你在computed里面并没有设置set的方法,所以导致报错
只需要将全选的方法‘allCheck’直接设置为‘checkAllStatus’的set方法即可;