vue购物车功能实现思路,vuex购物车思路
本文主要介绍vue实现购物车的全选和反选。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue实现购物车全选和反向选择的具体代码，供大家参考。具体内容如下
项目需求：
实现购物车。
全框选实现了商家和商品的全选。
商家全选框实现了对当前商家所有商品的全选。
取消其中一个商品，然后取消对应商家的全选和全选框。
选择一个商家下的所有商品，然后勾选对应商家的所有框，取消勾选所有框。
如果选择了所有商品，则勾选所有商家的全选框和全选框。
我的思路：
1.通过对数据的简单操作，可以实现更深层次的全选操作。
2.vue。$set(object，key，value)向对象添加属性以更新视图
3.确定数组中的每个元素是否满足es6的每个条件。如果所有元素都满足条件，它将返回true，如果一个元素不满足，它将返回false。
模板：
div class=box
input= checkbox v-model= checked all @ change= check all 全选
/div
div class= list style= margin-left:50px；数据中的v-for=(val，k :key= k
div class=box
input type= checkbox v-model= val . checked @ change= _ checkAll(val)
{{val.seller}}
/div
ul v-for=(item，index)in val . goods list :key= index
里
输入类型=复选框 v-model= item . checked @ change= handle check(item，index)
{{item.name}}
/李
/ul
/div
Scritpt层
var app=新Vue({
埃尔： #app ，
数据：{
CheckedAll: false，//控制是否全选。
数据：[{
卖家：“商家1”，
商品列表：[{
名称：“商品1”
}]
}, {
卖家：“商家2”，
商品列表：[{
名称：“商品2”
}, {
名称：“商品3”
}]
}]//数据
},
已安装(){
this.data.forEach(item={
这个。$ set (item， checked ，false)//vue解决方案无法检测对象属性的添加或删除。
//item . checked=false；//如果直接为真实数据设置的对象的值发生变化，视图将不会更新
if (item.goodsList) {
item . goods list . foreach((citem)={
这个。$set(citem， checked ，false)
//citem . checked=false；
})
}
});
},
方法：{
//全选
checkAll() {
this.data.forEach(item={
item . checked=this . checked all；
if (item.goodsList) {
item.goodsList.forEach(citem={
citem . checked=this . checked all；
})
}
})
},
//选择所有商家
_checkAll(val，k) {
val.goodsList.forEach(item={
item . checked=val . checked；
});
if(this . data . every(item=item . checked)){
this.checkedAll=true
}否则{
this.checkedAll=false
}
},
//商品选择框
handleCheck(项目，索引){
var check=[]；//保存中间层是否被选中的布尔值
this.data.forEach((items，index)={
if (items.goodsList) {
var bool=items . goods list . every(citem=citem . checked)；
if (bool) {
items.checked=true
}否则{
items.checked=false
}
check . push(bool)；
}
})
if (check.indexOf(false)==-1) {
this.checkedAll=true
}否则{
this.checkedAll=false
}
},
}
})
效果如下
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。