vue中的checkbox全选和反选

      前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选  、Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选。小颖当时看他给的截图,也没太明白,后来手动巧了一下,发现一个疑问,虽然问题是解决了,但是至于为什么小颖还是不太明白,希望有哪位vue大神看到了能帮忙解答一下,嘻嘻,小颖先在这里提前说声:谢谢啦,嘻嘻。

      我们先来看看第一种实现全选和反选的方法:直接使用   script   标签调用vue。

    <div id="app">
        <input type="checkbox" v-model='checked' v-on:click='checkedAll'> 全选{{checked}}
        <template v-for="(list,index) in checkboxList">
            <input type="checkbox" v-model='checkList' :value="list.id"> {{list.product_inf}}
        </template>
        {{checkList}}
    </div>
    <script>
    var vm = new Vue({
        el: '#app',
        data: {
            checkboxList: [{
                'id': '1',
                'product_inf': '女士银手链'
            }, {
                'id': '2',
                'product_inf': '女士银手镯'
            }, {
                'id': '3',
                'product_inf': '女士银耳环'
            }],
            checked: false, //全选框
            checkList: []
        },
        methods: {
            checkedAll: function() {
                var _this = this;
                console.log(_this.checkList);
                console.log(_this.checked);
                if (!_this.checked) { //实现反选
                    _this.checkList = [];
                } else { //实现全选
                    _this.checkList = [];
                    this.checkboxList.forEach(function(item, index) {
                        _this.checkList.push(item.id);
                    });
                }
            }
        },
        watch: {
            'checkList': {
                handler: function(val, oldVal) {
                    if (val.length === this.checkboxList.length) {
                        this.checked = true;
                    } else {
                        this.checked = false;
                    }
                },
                deep: true
            }
        },
    })
    </script>

打印结果:

 

 

 

第二种实现方式:在vue脚手架环境中:

  <div class="container">
    <input type="checkbox" v-model='checked' v-on:click='checkedAll'> 全选{{checked}}
    <template v-for="(list,index) in checkboxList">
      <input type="checkbox" v-model='checkList' :value="list.id">{{list.product_inf}}
    </template>
    {{checkList}}
    <button @click="ceshi">ceshi</button>
  </div>
<script>
export default {
  data() {
    return {
      checkboxList: [{
        'id': '1',
        'product_inf': '女士银手链'
      }, {
        'id': '2',
        'product_inf': '女士银手镯'
      }, {
        'id': '3',
        'product_inf': '女士银耳环'
      }],
      checked: false, //全选框
      checkList: []
    }
  },
  methods: {
    ceshi: function() {
      console.log(this.checked)
    },
    checkedAll: function() {
      var _this = this;
      console.log(_this.checkList);
      console.log(_this.checked);
      this.$nextTick(function() {
        // DOM 现在更新了
        console.log(_this.checked);
      });
      if (_this.checked) { //实现反选
        _this.checkList = [];
      } else { //实现全选
        _this.checkList = [];
        _this.checkboxList.forEach(function(item, index) {
          _this.checkList.push(item.id);
        });
      }
    }
  },
  watch: { //深度 watcher
    'checkList': {
      handler: function(val, oldVal) {
        if (val.length === this.checkboxList.length) {
          this.checked = true;
        } else {
          this.checked = false;
        }
      },
      deep: true
    }
  }
}

</script>

 打印结果:

大家看完上面的四张图有没有发现一个问题:

同样是在 click 事件 checkedAll 中执行:   console.log(_this.checked);  但是结果却不一样,第一种环境中,在修改数据之后checkedAll事件中的_this.checked立马就变了,但是在第二种环境中,在修改数据之后checkedAll事件中的_this.checked不会立马变,而是等到下一次调用时,才发生变化,但是在 click 事件 checkedAll   的this.$nextTick事件中,能将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。

    所以在两种环境中,判断全选和反选的条件也不一样:

第一种

                if (!_this.checked) { //实现反选
                    _this.checkList = [];
                } else { //实现全选
                    _this.checkList = [];
                    this.checkboxList.forEach(function(item, index) {
                        _this.checkList.push(item.id);
                    });
                }

第二种:

      if (_this.checked) { //实现反选
        _this.checkList = [];
      } else { //实现全选
        _this.checkList = [];
        _this.checkboxList.forEach(function(item, index) {
          _this.checkList.push(item.id);
        });
      }

当然也可以将第二种修改为:

    checkedAll: function() {
      var _this = this;
      console.log(_this.checkList);
      this.$nextTick(function() {
        console.log(_this.checked);
        // DOM 现在更新了
        if (!_this.checked) { //实现反选
          _this.checkList = [];
        } else { //实现全选
          _this.checkList = [];
          _this.checkboxList.forEach(function(item, index) {
            _this.checkList.push(item.id);
          });
        }
      });
    }

好啦今天的分享就到这里啦,希望大神们能帮小颖解答这个疑惑呦。。。。嘻嘻。

疑问解决啦,哈哈,原来是版本问题,之前博友给的低版本的,用了最新的版本后发现也要用Vue.nextTick方法

用新版本后,点击事件:

            checkedAll: function() {
                var _this = this;
                console.log(_this.checkList);
                Vue.nextTick(function() {
                    // DOM 更新了
                    console.log(_this.checked);
                    if (!_this.checked) { //实现反选
                        _this.checkList = [];
                    } else { //实现全选
                        _this.checkList = [];
                        _this.checkboxList.forEach(function(item, index) {
                            _this.checkList.push(item.id);
                        });
                    }
                })
            }

 

转载于:https://www.cnblogs.com/yingzi1028/p/8298200.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值