                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /使用vue2.0实现购物车和地址选配功能

单选全部选择触发全选，试了前面童鞋的各种方法都不能触发全选

selectedProducted:function (item) {
    //判断注册是否存在商品
    if(typeof item.checked == 'undefined'){
        //全局注册变量，监听变量的值得变化
        //Vue.set(item,"checked",true);

        //局部注册变量
        this.$set(item,"checked",true);
    }else{
        item.checked =! item.checked;
        //定义变量，用于记录选定的商品的个数
        var checkedNum = 0;
        //遍历所有的商品
        for (var i = 0; i < this.productionList.length; i++) {
            //如果选中了商品
            if (this.productionList[i].checked) {
                //选中的商品数量加1
                checkedNum++;
            }
        }
        //如果选中的商品数量和商品总数一样，表示选中了所有商品
        if (checkedNum == this.productionList.length) {
            this.checkedAllFlag = true;
        //没有选中所有的商品
        } else {
            this.checkedAllFlag = false;
        }

    }

},

Mrzhang1

2018-01-19

源自：使用vue2.0实现购物车和地址选配功能 5-1

关注问题我要回答

778

操作

收起

3 回答

qq_遛弯的豌豆_0
2018-07-09

定义两个空的数组，分别来装数据。主要是用来比对作用。一个数组用来装被选中时当前这条被点击的数据的price*shuliang.

一个数组用来存被选中的当前数据的名称或者数量或者价格，这个数组没有其他的作用。仅仅是用来比较两个数组的长度，当两个数组的长度相等就点亮全选按钮，当数组的长度不相等，就熄灭全选按钮。也就是说，取消任意一条数据的时候就熄灭全选按钮。并且删除掉这个数组中的最前面的这个值。这个判断有点复杂。理解了就好弄。饶恕我不能贴出代码。这个老师很懒。故意不讲选中全部单品却不点亮全选按钮。就是一个最大的bug，也是最难点所在。

0 回复有任何疑惑可以回复我~

收起回答

US鲁鲁修
2018-02-09

SelectProduct: function(product){

var checkedLength = 0;

if ( typeof product.checked == "undefined") {

this.$set(product, "checked", true);

} else {

product.checked = !product.checked;

}

this.calcTotalPrice();

for ( var i = 0; i < this.productList.length; i++ ) {

if (this.productList[i].checked){

checkedLength++;

}

if ( checkedLength == this.productList.length) {

this.checkAll();

} else {

this.checkAllFlag = false

}

0 回复有任何疑惑可以回复我~

收起回答

Mrzhang1 提问者
2018-01-19

这是我定义的data，只是在 selectedProducted加了代码，html里面没有加东西，请问怎么解决哈？

data:{
    totalMoney:0,
    checkAllFlag:false,
    productionList:[]
},

0 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

使用vue2.0实现购物车和地址选配功能

参与学习 96865 人
解答问题 446 个

本视频教程结合案例完整贯穿各个知识点，轻松玩转vue2.0框架

进入课程

单选全部选择触发全选，试了前面童鞋的各种方法都不能触发全选

我要回答关注问题

热搜

最近搜索清空

单选全部选择触发全选，试了前面童鞋的各种方法都不能触发全选

3 回答

单选全部选择触发全选，试了前面童鞋的各种方法都不能触发全选