How to return value from loop. js, vuejs

Question

Sorry, I'm beginner with JS,i have a basic question, but i spent a whole day trying to find answer in google and i didn't.

I have a massic financial instrument developed on php and I need to build complex financial calculator that shows everything with reactivity. I need help to figure out how to make complex calculations with many if statements inside of the loop and then sum output value from each object in array and return total summed value. Using Vuejs for this.

So my cashDividends() must be a sum of calculated values from each object in the loop.

Below I put a piece of code to understand problem I'm facing.

Please check if have a minute. Thanks!

     new Vue({
    el: "#waterfall",
    data() {
        return {
        info: {
            cash_dividends: true,
            converted_liabilities: true,
        },
        equities: [
            @foreach($preferredEquities as $equity)
            { name: '{{ $equity->name }}', id: {{ $equity->id }} },
            @endforeach
            ]
        }
    },
    computed: {
        remainingExit () {
            return this.form.exit_value - this.form.uncovered_debt - this.form.transaction_fees
        },
        cashDividends() {
    //I supposed should be something like this.     
          this.equities.forEach(function(equity)
          {
            //Here I make a lot of calculations with bunch of if statements using object and DOM input values. for each object 

          }
          // And here I need to return sum of calculated values from each object (equity) in array 
        }
    },

Answer 1

Use reduce function

new Vue({
el: "#waterfall",
data: {
    equities: [
           {name: "Serias A", price: '20'},
           {name: "Serias B", price: '21'},
        ]
},
computed: {
    cashDividends() {
        var sum = this.equities.reduce(function(acc, equity) {
            return acc + parseInt(equity.price);
        }, 0)
    }
}
});

Answer 2

You could use reduce function which you could learn more about here:

new Vue({
  el: "#app",
  data: {
    equities: [{
        name: "Serias A",
        price: 20
      },
      {
        name: "Serias B",
        price: 21
      },
    ]
  },
  computed: {
    cashDividends() {
      return this.equities.reduce(this.sum);
    }
  },
  methods: {
    sum(total, num) {

      return total.price + num.price
    }
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
<div id="app">
  {{cashDividends}}
</div>

Answer 3

You can define a variable sum and iteratively add equity.price to it as follows:

    cashDividends() {
        let sum = 0
        this.equities.forEach(function(equity)) {
            sum+=equity.price
        }

        return sum
    }