问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vuejs 全选

头像
心语花束
    1691953

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

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

    javascripthtml5
    阅读 1.9k
    3 个回答
    得票最新
    头像
    疯子蝈蝈
      1.2k1110
      ✓ 已被采纳

      报错的原因是，你的‘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>
      头像
      wlove
        6.9k3835

        亲自copy代码到本地测试
        没有报错 功能不对而已...

        头像
        luozz
          5.8k3629

          稍微修改了一下：

          <!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>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题