用vue做仿淘寶購物車，但是中間的組件循環(huán)出現(xiàn)的時候把el-checkbox也給循環(huán)了，導(dǎo)致點擊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="http://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:?'已達庫存最高數(shù)量' ??????????}); ????????} ??????} ????} ??}; </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>