用vue做仿淘宝购物车，但是中间的组件循环出现的时候把el-checkbox也给循环了，导致点击checkbox就牵连到了下面的checkbox，这个时候该怎么办？贴代码：<template>
<div class="icon">
<div>
<el-row class="icon-one">
<el-col :span='2'><i @click="goback" class="icon iconfont icon-back"></i></el-col>
<el-col :span='22'>
<span class="el-dropdown-link">购物车<span>(1)</span></span>
</el-col>
</el-row>
</div>
<div class="icon-two">
<el-checkbox-group>
<el-row style="padding: 20px;padding-bottom: 0px" v-for="(carts,index) in cart" :key="index">
<el-col>
<el-card shadow="always">
<el-row class="el-row-one">
<el-col :span='4'>店铺</el-col>
<el-col :span='16'>morem</el-col>
<el-col :span='4'>客服</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-col :span="1" >
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-col>
<el-row>
<el-col :span='5' class="lazy">
<img
src="//gw1.alicdn.com/bao/uploaded/i3/36950449/TB2nty5fyOYBuNjSsD4XXbSkFXa_!!36950449.jpg_90x90.jpg"
width="100%;">
</el-col>
<el-col :span='13' style="font-size: 15px">
<p>{{carts.commodityName}}</p>
<p style="font-size: 14px;color: #b3b3b3">价格：{{carts.commodityPrice}}</p>
<p>共<span>{{carts.commodityNumber}}</span>件</p>
<p style="font-size: 14px;color: #ff8a19">{{carts.commoditySpecificationInventoryPriceEntity.specification1}}</p>
</el-col>
<el-col :span='2' class="zuoce">
<el-input-number v-model="carts.commodityNumber" size="small" controls-position="right" @change="handleChange" :min="1" @click="zuida"></el-input-number>
<el-button>删 除</el-button>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
</el-checkbox-group>
</div>
<div class="el-footer">
<el-row>
<el-col :span='3'>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<!--<el-checkbox ":indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange>全选</el-checkbox>-->
</el-col>
<el-col :span='15'>
合计:<span style="color: orangered;font-size: 16px">￥19.90</span>
</el-col>
<router-link to="/MyCart">
<el-col :span='5'>
<el-button>立即购买</el-button>
</el-col>
</router-link>
</el-row>
</div>
</div>
</template>
<script>
/* eslint-disable no-cond-assign,no-undef,no-unused-vars */
import ElCol from 'element-ui/packages/col/src/col';
import ElButton from '../../../node_modules/element-ui/packages/button/src/button.vue';
import axios from 'axios';
import ElCheckbox from '../../../node_modules/element-ui/packages/checkbox/src/checkbox.vue';
import ElRow from 'element-ui/packages/row/src/row';
const cityOptions = ['1', '2'];
export default {
components: {
ElRow,
ElCheckbox,
ElButton,
ElCol},
axios,
name: 'fourPage',
data() {
return {
cart: [],
userId: 1,
checkAll: false,
checkedCities: [''],
cities: cityOptions,
isIndeterminate: true
};
},
mounted() {
this.getjson();
},
methods: {
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
},
goback() {
this.$router.go(-1);// 1:前进 ,-1:后退
},
handleChange(value) {
console.log(value);
},
getjson() {
axios.get('http://39.107.252.226:8808/queryShoppingCart', {params: {userId: this.userId}})
.then(this.succ);
},
succ(res) {
console.log(res);
this.cart = res.data.foods;
console.log(this.cart);
},
zuida() {
// eslint-disable-next-line no-constant-condition
if (commodityNumber = 7) {
this.$message({
message: '已达库存最高数量'
});
}
}
}
};
</script>
<style scoped>
.icon-one {
width: 100%;
height: 47px;
line-height: 47px;
text-align: center;
background-color: #FAFAFA;
}
span {
font-size: 16px;
}
.el-footer {
margin-right: 10px;
bottom: 0;
width: 100%;
height: 50px;
color: black;
line-height: 50px;
z-index: 400000;
position: fixed;
margin-top: 40px;
background-color: #fbfbfb;
text-align: right;
}
p{
padding: 0px;
margin: 0px;
}
.el-footer .el-button {
background-color: #ff2315;
color: white;
margin-left: 12px;
border-radius: 0px;
}
.el-input-number--small {
width: 84px;
line-height: 30px;
}
.el-input-number{
margin-top: 25px;
}
.zuoce .el-button{
margin-top: 10px;
height: 20px;
line-height: 0px;
}
</style>
添加回答
举报
0/150
提交
取消