JordanBarber JordanBarber - 3 months ago 30
Javascript Question

Computed function from Vue component Data

I have the following Vue component and data:

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}
]
}
})


And the following template:

<div class="page page2 current">

<!-- Call our custom receipt vue component -->
<receipt header="Between the Covers &amp; Grinders Café" date="Sept. 23, 2016 10:52 am" :sales="sales1"></receipt>
<receipt header="Between the Covers &amp; 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>


I can't figure out how to compute the 'subtotal'. What I need to do is have the computed function 'subtotal' return the total of all prices for each 'sales' object. What am I doing wrong?

Answer

You need to add up all the price components in 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 &amp; Grinders Café" date="Sept. 23, 2016 10:52 am" :sales="sales1"></receipt>
  <receipt header="Between the Covers &amp; 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>

Comments