大家好！你能帮我如何使用购物车表的数量减去列表表的数量吗？在我的 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);
}
}
【问题讨论】：
感谢你的尝试，但不幸的是有很多小错误，比如
注意：添加所有验证，例如如果没有可用的产品等。
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"> </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>【讨论】：