3 回答

TA貢獻1898條經(jīng)驗 獲得超8個贊
報錯的原因是,你的‘checkAllStatus’是通過computed來獲取的,但是綁定在了input里面;點擊checkbox,設(shè)置了‘checkAllStatus’的值,但是你在computed里面并沒有設(shè)置set的方法,所以導(dǎo)致報錯
只需要將全選的方法‘a(chǎn)llCheck’直接設(shè)置為‘checkAllStatus’的set方法即可;
<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 : '數(shù)據(jù)一',
checked : true,
},{
title : '數(shù)據(jù)二',
checked : true,
},{
title : '數(shù)據(jù)三',
checked : true,
},{
title : '數(shù)據(jù)四',
checked : true,
},{
title : '數(shù)據(jù)五',
checked : true,
}];
var vm = new Vue({
el : '#app',
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>
添加回答
舉報