我如何使总可见使用Vue.js?

Question

购物车不能把我的商品价格加在一起。我不确定我做错了什么。我在我的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，而且我无法让它在商品进入购物车时将价格相加。极限新秀。

Answer 1

可以用computed属性代替method来计算total:

data: {},
computed: {
total() {
let total = 0;
for (let i = 0; i < this.cart.length; i++){
total += this.cart[i].price;
}
return total;
}
},
methods: {}

然后你可以在你的模板部分使用{{ total }}:

<p>Your Total:</p>
<h3 id ="tot">{{ total }}</h3>
<button @click="checkout()" class = "btn btn-primary">Checkout</button>
</div>

计算的简单定义:

计算属性用于声明性地描述一个值取决于其他值。当数据绑定到计算属性时在模板中，Vue知道何时更新DOM计算属性所依赖的值已更改。

在您的代码中，每当this.cart改变(例如通过添加或删除一个项目)total的值重新计算。所以你的总数总是与你的购物车同步，所有的事情都是由vue自己做的。

你可以在这里阅读更多关于计算:计算属性和观察者.

Answer 2

这是因为Vue.js方法不是响应式的，所以它们只在被调用时执行，而不是在参数或变量发生变化时执行。

我认为计算机属性可能适合你的需要。

它们类似于data，但允许您定义函数。结果是被动的，这意味着如果函数中的任何变量发生变化，结果将被重新计算。在您的例子中，如果一个商品被添加或从购物车中删除，则总额将被重新计算。

而不是做

methods: {
// ...
// 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();

<h3 id ="tot">R </h3>

可以将total()方法移动到computed属性中:

new Vue({
el: '#gallery', 
data: { /* ... */ },
computed: {
total() {
let total = 0;
for(let i = 0; i < this.cart.length; i++){
total += this.cart[i].price;
}
return total;
}
},
methods: { /* ... */ }
});

<h3 id ="tot">{{ total }}</h3>

这里，每当this.cart发生变化时，函数total()将被调用，<h3>的内容将相应地更新。