vuejs 全選

使用vuejs實(shí)現(xiàn)全選功能，全選按鈕有默認(rèn)值，需要提前判斷單選按鈕的個(gè)數(shù)，如果單選按鈕選全部選中，全選按鈕選中，否則不選中。

<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 : '數(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 : 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;
            });
        }
    }
});

現(xiàn)在的問題是，在初始化后改變?nèi)x按鈕狀態(tài)會(huì)報(bào)錯(cuò)。請(qǐng)問這種情況該如何處理

回答

編輯回答

莫小染

親自copy代碼到本地測(cè)試
沒有報(bào)錯(cuò) 功能不對(duì)而已...

2018年2月22日 02:15

編輯回答

悶騷型

報(bào)錯(cuò)的原因是，你的‘checkAllStatus’是通過(guò)computed來(lái)獲取的，但是綁定在了input里面；點(diǎn)擊checkbox，設(shè)置了‘checkAllStatus’的值，但是你在computed里面并沒有設(shè)置set的方法，所以導(dǎo)致報(bào)錯(cuò)

只需要將全選的方法‘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>

2017年9月6日 13:15

編輯回答

淺時(shí)光

稍微修改了一下：

<!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 : '數(shù)據(jù)一',
        checked : true,
    },{
        title : '數(shù)據(jù)二',
        checked : true,
    },{
        title : '數(shù)據(jù)三',
        checked : false,
    },{
        title : '數(shù)據(jù)四',
        checked : true,
    },{
        title : '數(shù)據(jù)五',
        checked : true,
}];

var vm = new Vue({
    el : '#app',
    data : {
        list:list,
        allChecked: false
    },
    methods : {
        allCheck : function(){
            let self = this;
            this.list.map((item) => {
                item.checked = !self.allChecked;
            });
        }
    }
});
</script>
</body>
</html>

2017年9月29日 21:44