我有以下Vue组件和数据:
Vue.component('receipt', {
template: '#receipt-template',
data: function() {
return {
tip: 8.50
};
},
computed: {
subtotal: function() {
return this.sales.price;
console.log(this.sales.price);
}
},
props: ['header', 'date', 'sales' ]
})
new Vue({
el: '#content',
data: {
sales1: [
{amount: 1, desc: 'A book title', price: 13.99},
{amount: 3, desc: 'An espresso title', price: 5.00},
{amount: 6, desc: 'A drink title', price: 4.25},
{amount: 2, desc: 'A pastrt', price: 3.99}
],
sales2: [
{amount: 1, desc: 'A title', price: 9},
{amount: 2, desc: 'An title', price: 0},
{amount: 3, desc: 'A title', price: 5},
{amount: 4, desc: 'A ', price: 99}
]
}
})
以下模板:
<div class="page page2 current">
<!-- Call our custom receipt vue component -->
<receipt header="Between the Covers & Grinders Café" date="Sept. 23, 2016 10:52 am" :sales="sales1"></receipt>
<receipt header="Between the Covers & Grinders Café" date="Sept. 25, 2016 3:08 pm" :sales="sales2"></receipt>
<div class="clearfix"></div>
</div><!--end page2-->
<template id="receipt-template">
<div class="receipt">
<div class="receipt-header">
<h2>{{ header }}</h2>
</div><!--end receipt-header-->
<div class="receipt-body">
<div class="receipt-labels">
<p>Sales</p>
<p>{{ date }}</p>
<div class="clearfix"></div>
</div><!--end receipt-labels-->
<div class="receipt-sales">
<div class="receipt-sale-row" v-for="sale in sales">
<p>{{ sale.amount }}</p>
<p>{{ sale.desc }}</p>
<p class="sale-price">${{ sale.price }}</p>
</div><!--end receipt-sale-row-->
</div><!--end receipt-sales-->
<div class="receipt-subtotals">
<p>Subtotal</p>
<p>{{ subtotal }}</p>
<p>Tax</p>
<p>$2.64</p>
<div class="clearfix"></div>
</div><!--end subtotals-->
<div class="receipt-totals">
<p>Tip</p>
<p>{{ tip }}</p>
<p>Total</p>
<p></p>
<div class="clearfix"></div>
</div><!--end totals-->
<div class="receipt-card">
<p>Visa 1825</p>
<p>$41.25</p>
<div class="clearfix"></div>
</div><!--end card-->
</div><!--end receipt-body-->
</div><!--end receipt-->
</template>
我无法弄清楚如何计算'小计'。我需要做的是让计算函数'subtotal'返回每个'sales'对象的所有价格的总和。我做错了什么?
答案 0 :(得分:1)
您需要在price
中添加所有this.sales
个组件。
subtotal: function() {
let result = 0;
this.sales.forEach((sale) => result += sale.price);
return Math.round(100 * result) / 100;
}
Vue.component('receipt', {
template: '#receipt-template',
data: function() {
return {
tip: 8.50
};
},
computed: {
subtotal: function() {
let result = 0;
this.sales.forEach((sale) => result += sale.price);
return Math.round(100 * result) / 100;
}
},
props: ['header', 'date', 'sales']
});
new Vue({
el: '.page.current',
data: {
sales1: [{
amount: 1,
desc: 'A book title',
price: 13.99
}, {
amount: 3,
desc: 'An espresso title',
price: 5.00
}, {
amount: 6,
desc: 'A drink title',
price: 4.25
}, {
amount: 2,
desc: 'A pastrt',
price: 3.99
}],
sales2: [{
amount: 1,
desc: 'A title',
price: 9
}, {
amount: 2,
desc: 'An title',
price: 0
}, {
amount: 3,
desc: 'A title',
price: 5
}, {
amount: 4,
desc: 'A ',
price: 99
}]
}
});
.receipt-subtotals p,
.receipt-labels p,
.receipt-sale-row p,
.receipt-totals p {
display: inline-block;
margin: 1rem;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div class="page page2 current">
<!-- Call our custom receipt vue component -->
<receipt header="Between the Covers & Grinders Café" date="Sept. 23, 2016 10:52 am" :sales="sales1"></receipt>
<receipt header="Between the Covers & Grinders Café" date="Sept. 25, 2016 3:08 pm" :sales="sales2"></receipt>
<div class="clearfix"></div>
</div>
<!--end page2-->
<template id="receipt-template">
<div class="receipt">
<div class="receipt-header">
<h2>{{ header }}</h2>
</div>
<!--end receipt-header-->
<div class="receipt-body">
<div class="receipt-labels">
<p>Sales</p>
<p>{{ date }}</p>
<div class="clearfix"></div>
</div>
<!--end receipt-labels-->
<div class="receipt-sales">
<div class="receipt-sale-row" v-for="sale in sales">
<p>{{ sale.amount }}</p>
<p>{{ sale.desc }}</p>
<p class="sale-price">${{ sale.price }}</p>
</div>
<!--end receipt-sale-row-->
</div>
<!--end receipt-sales-->
<div class="receipt-subtotals">
<p>Subtotal</p>
<p>${{ subtotal }}</p>
<p>Tax</p>
<p>$2.64</p>
<div class="clearfix"></div>
</div>
<!--end subtotals-->
<div class="receipt-totals">
<p>Tip</p>
<p>{{ tip }}</p>
<p>Total</p>
<p></p>
<div class="clearfix"></div>
</div>
<!--end totals-->
<div class="receipt-card">
<p>Visa 1825</p>
<p>$41.25</p>
<div class="clearfix"></div>
</div>
<!--end card-->
</div>
<!--end receipt-body-->
</div>
<!--end receipt-->
</template>