获取到数据之后，由于有一些属性数据中没有，并且我们想要它在页面中是呈响应式存在的，因此从接口获取到数据之后不应该直接赋值给data里，而是应该先给数据增添属性，再把增添后的数据赋值到data处，具体代码如下：
getLists(){ cart.getCartLists().then((response)=>{ let list=response.data.cartList list.forEach(shop=>{ shop.checked=true shop.editingStatus=false shop.editingMsg='编辑' shop.removeChecked=false shop.goodsList.forEach(good=>{ good.checked=true good.removeChecked=false good.touchDelete=false }) }) this.cartLists=list }) }
每次选择了商店下的商品时，都利用数组的every方法来遍历数组看是否全部商品都被选中了，若选中则商店也被选中，同理，若选择了商店，则遍历商店下的商品，把商店下的商品全部选中。取消选中亦是同理。
全选与否则利用计算属性来处理，利用计算属性的getter来获取此时购物车的状态来判断是否被全选，利用计算属性的setter来处理点击全选时商店及商店下商品的状态的改变。
同样的，利用计算属性来计算正常状态下选中商品的总价，并返回选中商品的列表。同理，利用计算属性来计算编辑状态下的选中的商品的列表，并以数组的形式返回。
在编辑状态下，我利用了计算属性来对商品的数量的数据进行了监测，若判断出数量中存在非数字或者负数的情况，则会自动把数量的数据变成1。
利用touchstart和touchend两个事件来实现商品左拉删除的功能，这两个事件分别绑定start和end的方法，方法的具体代码如下所示：
start(e,good){ good.startX=e.changedTouches[0].clientX }, end(e,good,goodIndex,shopIndex,shop){ let endX=e.changedTouches[0].clientX let left='0px' if (good.startX-endX>100){ good.touchDelete=true left='-60px' Velocity(this.$refs[`goods-${shopIndex}-${goodIndex}`],{left}) shop.goodsList.forEach((otherGood,index)=>{ if (otherGood.touchDelete && index!==goodIndex) { otherGood.touchDelete=false Velocity(this.$refs[`goods-${shopIndex}-${index}`],{left:'0px'}) } }) } else if (endX-good.startX>100) { good.touchDelete=false left='0px' Velocity(this.$refs[`goods-${shopIndex}-${goodIndex}`],{left}) } }
当添加了左拉删除的功能之后，页面会出现一个BUG，就是左拉之后，点击该商品对应的商店下的编辑按钮，删除的按钮会继续被左拉，呈现一个比其他删除按钮长的BUG状态。
处理办法：通过给每个商品的一个具有唯一识别性的ref，然后在点击编辑时，找到已左拉的商品的对应的具有唯一识别性的ref，把它的左拉状态还原即可，具体代码如下所示：