Computed function from Vue component Data

Question

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 1

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>