【发布时间】：2021-09-18 13:27:14
【问题描述】：
卡住了购物车，无法将我的商品价格加在一起。 我不确定我做错了什么。我在我的 vue 对象中创建了一个函数，如果将其添加到购物车中，它会将总数加在一起，但要么我调用它错误，要么函数错误。目前我在 json 文件中有一个数据数组的副本，它没有链接，因为我直接从 vue 对象中提取，但我更感兴趣的是让购物车在这个阶段添加价格
<div id="gallery">
<div id="cart">
<div class="card-body">
<h6 class = "fw-light">Your Shopping Cart</h6>
<ul class="list-group list-group-flush">
<!-- Change this line to add from cart.json -->
<li class="list-group-item" v-for="(item, i) in cart" :key="i">
<div class="card" style="width: 18rem;">
<b>{{item.name}}</b>
<b>R{{item.price}}</b>
<img :src="item.image" width="120px" height="auto">
<button @click="deleteItem(i)" >Remove Item</button>
</div>
</li>
</ul>
</div>
我如何在这里调用我的 Vue 对象的总函数？
<p>Your Total:</p>
<h3 id ="tot">R </h3>
<button @click="checkout()" class = "btn btn-primary">Checkout</button>
</div>
我的 Vue 对象如下所示：
<script src = "https://unpkg.com/vue"></script>
<script>
let galleryItems = new Vue({
el: '#gallery',
data: {
items: [{
id : 1,
name : 'Double King Sized Bed',
image : 'images/beds/bigWhiteBed.jpg',
price : 20000,
description : 'A double king sized bed with a white interior and a black cover'
},
{
id : 2,
name : 'Queen Sized Bed with Storage Drawers',
image : 'images/beds/darkDrawerBed.jpg',
price : 15000,
description : 'A queen sized bed with a dark storage drawer'
},
{
id : 3,
name : 'King Sized Bed',
image : 'images/beds/fancyBed.jpg',
price : 12000,
description : 'A king sized bed with a white interior and a black cover'
},
{
id : 4,
name : 'Pine King',
image : 'images/beds/fancyPineBed.jpg',
price : 8000,
description : 'A twin sized bed with a white interior and a black cover'
},
{
id : 5,
name : 'Queen Sized Bed',
image : 'images/beds/royalBed.jpg',
price : 15000,
description : 'A queen sized bed with a white interior and a black cover'
},
{
id : 6,
name : 'Glass coffee table',
image : 'images/coffee/glassCoffeeTable.jpg',
price : 3000,
description : 'Stylish Glass Coffee table'},
{
id : 7,
name : 'Wooden coffee table',
image : 'images/coffee/whiteCoffeeTable.jpg',
price : 2000,
description : 'White Coffee table'},
{
id : 8,
name : 'Wooden Coffee Table on wheels',
image : 'images/coffee/whitewheelCoffeeTable.jpg',
price : 3000,
description : 'Easy To Move coffee table'},
{
id : 9,
name : 'Two Piece Coffee table set',
image : 'images/coffee/yellowCoffeeTableSet.jpg',
price : 2000,
description : 'Two tables One Price'},
{
id : 10,
name : 'Large Black Leather L-Shaped home Cinema Couch',
image : 'images/couches/blackLshape.jpg',
price : 30000,
description : 'Stylish Black Leather L-Shaped home Cinema Couch '},
{
id : 11,
name : 'White Leather reading Lounger',
image : 'images/couches/fancyChair.jpg',
price : 30000, description : 'Single seated Reading chair'},
{
id : 12,
name : 'Black and white Home office desk',
image : 'images/desks/blackAndWhiteDesk.jpg',
price : 2000,
description : 'A Stylish Work Station'},
{
id : 13,
name : 'Large L-Shaped Work Station',
image : 'images/desks/LshapeOffice.jpg',
price : 4000,
description : 'A spacious Corner Unit Desk'},
{
id : 14,
name : 'Combined Leisure and Home Office Station',
image : 'images/desks/officeBed.jpg',
price : 13000,
description : 'Combine work, relaxation and Play'},
{
id : 15,
name : 'Truss Table styled desks',
image : 'images/desks/trussTableOfficeDesk.jpg',
price : 1500,
description : 'Easy to assemble and move'},
{
id : 16,
name : 'Jet Black Chair',
image : 'images/misc/blackChair.jpg',
price : 1000,
description : 'A chair for any Environment'},
{
id : 17,
name : 'Dinning Room Table',
image : 'images/misc/whiteDiningRoomTable.jpg',
price : 10000, description : 'Dining Room Table for the family'}
],
cart : []
},
methods: {
add2cart(item){
this.cart.push(item);
},
deleteItem(index){
this.cart.splice(index, 1);
},
// add a total for items in cart
total(){
let total = 0;
for(let i = 0; i < this.cart.length; i++){
total += this.cart[i].price;
}
return total;
}
} });
document.getElementById('tot').innerHTML = galleryItems.total();
</script>
目前它每次都显示为 0，当商品进入购物车时，我无法让它加起来价格。 这方面的极限新秀。
【问题讨论】：
标签： javascript html vue.js cart