vuejs 全选

使用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;
            });
        }
    }
});

现在的问题是,在初始化后改变全选按钮状态会报错。请问这种情况该如何处理

阅读 1.9k
3 个回答

报错的原因是,你的‘checkAllStatus’是通过computed来获取的,但是绑定在了input里面;点击checkbox,设置了‘checkAllStatus’的值,但是你在computed里面并没有设置set的方法,所以导致报错

只需要将全选的方法‘allCheck’直接设置为‘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 : '数据一',
        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:{
            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代码到本地测试
没有报错 功能不对而已...

稍微修改了一下:

<!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 : '#app',
    data : {
        list:list,
        allChecked: false
    },
    methods : {
        allCheck : function(){
            let self = this;
            this.list.map((item) => {
                item.checked = !self.allChecked;
            });
        }
    }
});
</script>
</body>
</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题