vue实现购物车添加同样商品合并显示一条数据，和更新购物车

然后我们再选择此商品，选择尺码26和数量为2，

点击加入购物车，购物车页面的数据为：

购物车的效果便实现了。

实现思想是，首先定义一个存放购物车的cartInfo【】，然后往里添加数据。对购物车数据进行查找，如果返回的index == -1，说明购物车里没有这件商品，添加至购物车。否则，就更新对应下标商品的数据。

实现代码如下：

商品详情页（shoppingitem.vue）

import storage from '../model/storage.js';
	export default {
		data() {
			return {
				info:{},
				value:'',
				num:1,
				currentSize:'',
				cartInfo:[]
			}
		},methods:{
			doAdd(info){
					//添加商品数据至购物车
			
					 	查找购物车信息中有没有相同商品,
					 	如果index == -1，代表没有找到相同商品，则添加至购物车
					 	否则，更新商品信息
					 * */
					var index = this.cartInfo.findIndex((item)=>{
							return item.id == this.$route.query.id
						})
					if(index == -1){
						this.cartInfo.push(
							{
								id:this.$route.query.id,
								name:this.info.itme_name,
								img:this.info.src,
								color:this.info.itemParams.color,
								price:this.info.new_price,
								num:this.num,
								size:this.currentSize,
								city:this.value,
								totalPrice:this.num*this.info.new_price
							})
						storage.set('cartInfo',this.cartInfo);
					}else{
						this.cartInfo[index].num+=this.num;
						this.cartInfo[index].size=this.currentSize;
						this.cartInfo[index].city=this.value;
						storage.set('cartInfo',this.cartInfo);
					}
					this.$router.push({path:'/shoppingcart'});
				}
		}

 核心代码就是doAdd（）方法里面的代码了。

 

 

 

 

来源：CSDN

作者：大灰狼吃小白兔

链接：https://blog.csdn.net/weixin_44268473/article/details/90642701