一、我們現在要拿取購物車中選中商品的狀態和該商品的所有數據或者id
<ul v-if="shopList.list.length>0"> <li class="shop-item" v-for="(item, index) in shopList.list" :key="index"> <!-- 圖片 --> <div class="check_wrap" @click="selectAllBtn($event)"> <input class="check" :check=check name="Fruit" type="checkbox" :value=index ref="checks" /> </div> <div class="icon"> <span> <img :src="item.img" alt="" v-lazy="item.img"> </span> </div> <!-- 主要內容 --> <div class="content"> <h2>{{item.name}}</h2> <div class="extra"> <span>UFV {{item.price}}</span> <span style="text-decoration:line-through">UFV {{item.price_origin}}</span> </div> <div class="cartcontrol-wrapper"> <div class="shop_delete" @click="reduce"><img src="../../assets/images/shopCar/-@2x.png" alt=""></div> <div class="shop_count"><span>{{item.count}}</span></div> <div class="shop_add" @click="add"><img src="../../assets/images/shopCar/+@2x.png" alt=""></div> </div> </div> </li> </ul>
1、使用 ref ，給 input 標簽加上一個 ref 例如
2、我們可以通過 this,$refs 操作到該標簽的dom 拿到input輸入框一系列數據或者狀態
這里我們選擇在點擊清空選中商品的按鈕這里觸發 this.$refs
這里將列表中的商品狀態全部打印出來 ，我們可以看一下 這三個商品的選中狀態
這時候就可以很清晰的看到，三個商品 分別0,1,2 只有第一個選中的商品的checked狀態為true其他都為false，那么就可以接下來的操作了
二、我們應該怎么拿到全部呢，這時候可以循環遍歷出所有的選中信息，從而拿到一個key(index.item)等等 繼續操作
1、這里可以使用到 forEach 怎么使用呢，數組.forEach(element=>{}) 這里的element 就是遍歷之后的多行數組，我們可以看一下
value 就是每一個下標值
var checkShops = checkShopList[values].checked
checkShops就是每個商品所選中的狀態
可以看到，打印出了每一個狀態，第一個為true 其他為false
三、這個時候就要開始拿到選中的商品的id了，也可以拿其他的，這里我通過拿id 進行清除所選的操作
1、可以進行判斷商品是否被選中，如果被選中，就拿取選中的id並放入一個數組里面
checkShops 就是每個商品的選中與否的信息，
var checkShops = checkShopList[values].checked 根據下標values遍歷
2、如果checkShops為true 就是為選中狀態，那么我們就將這些選中的id，加入到goodsids數組中
這里使用到push()方法， 數組.push(數據)
注意：這里的goodsids 需要在forEach方法外面定義
因為在forEach 循環內部的話，會將每一個數組都遍歷出來，每個數組里面且只有一個id數組
這里我們可以清楚的看到 點擊清楚所選的時候，選中的商品的id已經被放在了一起並且用 ，逗號隔開，這里用逗號隔開是公司項目要求需要 使用逗號隔開是使用 join(',') 數組.join(',')
就可以進行剩下的操作，點擊清除所選項目，發送請求攜帶id等參數完成功能。例如
可以記錄並嘗試。努力共勉