vue中的购物车功能，通过循环将购物车列表循环出来，每个商品前都有一个单选按钮，怎样在循环中通过绑定一个事件，来计算选中的商品，计算选中商品的总价？
本文将介绍逻辑+具体代码
逻辑：
1.首先应该为循环出来商品列表的单选框绑定一个事件。2.点击单选框时，应该找到所有的单选框。3.需要在data中定义一个数组，用于存放选中商品的下表，（也就是循环商品列表的下标）。4.每次点击单选按钮的时候，就要获取该下标对应商品的选中状态，判断该单选状态是true还是false,如果是true 的话，就将该商品的下表添加到data中定义的数组中，否则，说明点击之前是选中状态，点击之后就是非选中的状态，就要将该商品下表从数组中删除，5。每次点击都要循环data中的数组，找到数组下表对应商品的单价以及数量，从而算出总价。
代码如下:
<div class="car_box" v-show="show" style="" ref="table">
<ul v-for="(sp,index) in splist" :key='index'>
<!-- <p class="title"><img style="width:16px;height:14px;margin-right:5px;" src="@/assets/img/dian.png" alt=""><span>{{sp.supname}}</span></p> -->
<li v-for="(item,index2) in sp.sub" class="sp" :name="item.id">
<div class="info">
<input
type="checkbox" name="checked" class="cbox dx selBtn" @click="dx($event,item.id,item.proid,index2)">
<img :src="item.proimg" alt="">
<div class="commodity">
<!-- <input type="text" v-model="style" class="style"> -->
<h3>原价:￥<span style="font-size:13px;font-weight:800;color:#FF6F04;margin-right:5px;" class="sum">{{item.shopprice}}</span></h3>
<h3 v-show="stype == 1" style="margin-top: 0;">现价:￥<span style="font-size:13px;font-weight:800;color:#FF6F04;margin-right:5px;">现金:<span class="cash">{{item.presentprice}}</span>+购物券:<span class="quan">{{item.shoppingvoucher}}</span></span></h3>
<div class="number">
<span @click="shanchu(item.id)">删除商品</span>
<div class="num">
<span @click="jian(index,index2,item.id,item.presentprice,item.shoppingvoucher,item.shopprice)" :disabled="item.pronum === 1">-</span>
<input type="text" v-model="item.pronum" readonly class="sl text_box">
<span @click="jia(index,index2,item.id,item.presentprice,item.shoppingvoucher,item.shopprice)" >+</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
方法： dx (e,id,proid,index2) {
let checkDom = this.$refs.table.getElementsByClassName("selBtn")
if(checkDom[index2].checked){
this.checkedList.push(index2);
}else{
// 就删除数组中的该元素
for (var i = 0; i < this.checkedList.length; i++) {
if (this.checkedList[i] == index2) {
this.checkedList.splice(i, 1);
break;
}
}
// this.checkedList.splice(this.checkedList.indexOf(0,1,index2))
}
this.cashSum = 0
this.quanSum = 0
this.price = 0
console.log(this.checkedList);
for(var i = 0;i<this.checkedList.length;i++){
console.log(this.checkedList[i]);
let xiaBiao = this.checkedList[i]
let cash = this.splist[0].sub[xiaBiao].presentprice
let quan = this.splist[0].sub[xiaBiao].shoppingvoucher
let num = this.splist[0].sub[xiaBiao].pronum
let shopprice = this.splist[0].sub[xiaBiao].shopprice
// let cash = this.splist[0].sub[index2].
this.cashSum += parseFloat(cash)*parseInt(num)
this.quanSum += parseFloat(quan)*parseInt(num)
this.price += parseFloat(shopprice)*parseInt(num)
}
return;
this.goods_num += parseInt(num)
var that = this
var len = $('.dx').length
// console.log($('.dx:checked'));
var checkedLen = $('.dx:checked').length
console.log(checkedLen);
return
if (len == checkedLen) {
$('#qx').prop('checked', true)
// this.check_goods =
} else {
$('#qx').prop('checked', false)
}
this.js()
},
注意代码中有个 ref="table"这个是不能少的，具体是什么原因我暂时还不知道。后期再来补充。
