vue（购物车）

<template>
	<div>
		<div class="row">
			<!-- 菜单 -->
			<div class="col-sm-12 col-md-8">
				<table class="table">
					<thead class="thead-default">
						<tr>
							<th>尺寸</th>
							<th>价格</th>
							<th>加入</th>
						</tr>
					</thead>
					<tbody v-for="item in getMenuItems" :key="item.name">
						<tr>
							<td><strong>{{item.name}}</strong></td>
						</tr>
						<tr v-for="option in item.options" :key="option.size">
							<td>{{option.size}}</td>
							<td>{{option.price}}</td>
							<td>
								<button @click="addToBasket(item,option)" class="btn btn-sm btn-outline-success">+</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
	
			<!-- 购物车 -->
			 <div class="col-sm-12 col-md-4" >
			      <div v-if="baskets.length>0">
			        <table class="table">
			          <thead class="thead-default">
			            <tr>
			              <th>数量</th>
			              <th>商品名</th>
			              <th>品种</th>
			              <th>价格</th>
			            </tr>
			          </thead>
			          <tbody v-for="item in baskets" :key="item.name">
			            <tr>
			              <td>
			                <button class="btn btn-sm" @click="decreaseQuanity(item)">-</button>
			                <span>{{item.quantity}}</span>
			                <button class="btn btn-sm" @click="increaseQuanity(item)">+</button>
			              </td>
			               <td>{{item.name}}</td>
			              <td>{{item.size}}</td>
			              <td>{{item.price * item.quantity}}</td>
			            </tr>
			          </tbody>
			        </table>
			        <p>总价: {{totalMoney}}</p>
			        <button class="btn btn-success btn-block">提交</button>
			      </div>
			      <div v-else>{{basketText}}</div>
			    </div>
			</div>
		</div>
</template>
<script>
	export default{
		data(){
			return {
				baskets:[],
				basketText:'购物车里没商品',
				getMenuItems:[]
			}
		},
		computed:{
			totalMoney(){
				let totalCost=0;
				for(let index in this.baskets){
					totalCost+=this.baskets[index].price*this.baskets[index].quantity
				}
				return totalCost
			}
		},
		created(){
			
			this.$http.get('/menu.json')
		 	.then(res=>{
		 		var data=res.data;
		 			this.getMenuItems=data;
		 			console.log(data)
		 	})
		},
		methods:{
			
			addToBasket(item,option){
				var basket={
							name:item.name,
							size:option.size,
							price:option.price,
							quantity:1
						}
				if(this.baskets.length>0){
					var result=this.baskets.filter((basket)=>{
						return basket.name===item.name && basket.size===option.size
					})
					console.log(result)//是一个对象{name:'',size:'',quantity:'',price:''}
					 if(result.length>0 && result!=null){
					 	result[0].quantity++
					 }else{
					 	this.baskets.push(basket)
					 }



				}else{
					this.baskets.push(basket)
				}
				
			},
			decreaseQuanity(item){
				if(item.quantity<=1){
					this.removeFromBasket(item)
				}else{
					item.quantity--
				}
			},
			increaseQuanity(item){
				item.quantity++
			},
			removeFromBasket(item){
				this.baskets.splice(this.baskets.indexOf(item),1)
			}
		}
	}

</script>