Question

大家好！您能帮我如何使用购物车表的数量减去列表表的数量吗？在我的console.log中，当我向购物车中添加多个物品并单击减号按钮时，每行的数量变得相同。列表中的数量不同。如何在购物车表格中得到每个数量的正确结果？我想在购物车表格的底部显示正确的答案。这是我的jsfiddle-> https://jsfiddle.net/2zx9vy3n/20/

minusFromListToCart : function() {
            for(var index = 0; index < this.selects.length; index++) {
                    this.total = parseInt(this.select_quantity) - parseInt(this.input_quantity);
                console.log(this.total);
            }
        }

Answer 1

非常感谢您的尝试，但是很遗憾，这里有很多小错误，例如

重复相同的产品要单独进行，而不是添加到以前的
您需要计算方法来获取剩余计数
重置为您添加到购物车中的下一个产品
立即从相对产品数量中减去数量。

注意：添加所有验证，例如如果没有可用的产品等。

var app = new Vue({
		  el: '#app',
		  data: {
		    selects: [],
		    carts : [{
		    	id: null, name: null, cat: null, quantity : null
		    }],
		    lists: [
		        { id: 1, name: 'Book', cat: 'Category 1', quantity : 50},
		        { id: 2, name: 'Notebook', cat: 'Category 2', quantity : 60},
		        { id: 3, name: 'Pencil', cat: 'Category 3', quantity : 70}
		     ],
		     select_id : "",
		     select_name : "",
		     select_cat : "",
		     input_quantity : "",
		     select_quantity : "",
		     total : 0
		  },
      computed:{
        remainingQuantity : function() {
          var total_qty = 0;
          var selected_qty = 0;
          for(let i in this.lists){
          	total_qty += this.lists[i].quantity;
          }
          return total_qty;
			}
      },
		  methods : {
		  	retrieveList : function(id, name, cat, quantity) {
		  		this.input_quantity =1;
          this.select_id = id;
		  		this.select_name = name;
		  		this.select_cat = cat;
		  		this.select_quantity = quantity;

		  		//console.log(this.select_quantity);
		  		
		  		
		  	},
		  	addToCart : function() {
          if(!this.input_quantity){
            return false;
          }
		  		this.carts.id = this.select_id;
		  		this.carts.name = this.select_name;
		  		this.carts.cat = this.select_cat;
		  		this.carts.quantity = parseInt(this.input_quantity);

		  		console.log(this.carts.quantity);
          
            var selected_index =  this.selects.map((e)=>e.id).indexOf(this.select_id);
            if(selected_index > -1){
          	this.selects[selected_index].quantity += parseInt(this.input_quantity);
            }else{
          		this.selects.push({...this.carts});
          	}
            
            var lists_index =  this.lists.map((e)=>e.id).indexOf(this.select_id);
            if(lists_index > -1){
              this.lists[lists_index].quantity -= parseInt(this.input_quantity);
            }
		  		
		  	}

		  	
		}
	});

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
  </script>
</head>
<body>
	<div id="app">
		<table border="1">
			<thead>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>Category</th>
					<th>Quantity</th>
					<th>Action</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(list, index) in lists">
					<td>{{list.id}}</td>
					<td>{{list.name}}</td>
					<td>{{list.cat}}</td>
					<td>{{list.quantity}}</td>
					<td>
						<button @click="retrieveList(list.id, list.name, list.cat, list.quantity)" data-toggle="modal" data-target="#myModal">Add to cart</button>
					</td>
				</tr>
			</tbody>
		</table>

		<table border="1" class="mt-4">
			<thead>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>Category</th>
					<th>Quantity</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(select, index) in selects">
					<td>{{select.id}}</td>
					<td>{{select.name}}</td>
					<td>{{select.cat}}</td>
					<td>{{select.quantity}}</td>
				</tr>
			</tbody>
		</table>

		<p>Final Quantity : {{remainingQuantity}}</p>

		<div class="modal fade" id="myModal" class="text-dark" tabindex="1"> 		
				<div class="modal-dialog">
	 				<div class="modal-content">
	      
				        <div class="modal-header">
				          <h4 class="modal-title">Add Transaction</h4>
				          	<button type="button" class="close" data-dismiss="modal"></button>
				        </div>

	        			
						<div class="modal-body mx-auto" id="modal-less-input">
							<label for="input_quantity">Quantity</label>
							<div class="input-group form-group">
								<input type="number" class="form-control col-sm-12" id="input_quantity" v-model="input_quantity" name="input_quantity" placeholder="Enter Quantity" autofocus required>
							</div> 
							
						</div>
				    
				        <div class="modal-footer">
				          <button @click.prevent="addToCart()" type="button" class="btn btn-success" data-dismiss="modal"><i class="far fa-save">&nbsp;</i> Add to Cart</button>
				        </div>
	  		
			    	</div>
			 	</div> 
			</div>
	</div>



	<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	
</body>
</html>

如何从VueJS的列表中减去数量？

1 个答案: