Vuejs using foreach in computed property. Blade template

Question

I'm PHP developer and have very basic knowledge of js and vuejs, sorry if it looks too stupid. I'm building very complex reactive financial calculator. P.S. I work on Laravel(blade templates) and fetching data into vue using blade @foreach()

My problem is computed property. I need to find one value from very complex math formula (code below shows little part for the whole idea. On my computed cashDivideds() function I need to make some math to find value for each object in array. I use this way: @foreach($preferredEquities as $equities). After all calculations I get output with right value but only for the 1st $equity in database.

Questions: How to SUM my computed values from each $equity.

Below my code, hope it's enough information to understand my problem.

new Vue({
    el: "#waterfall",
    data: {
        form: {
            exit_value: 0,
            exit_date: moment(),
            uncovered_debt: 0,
            transaction_fees: 0,
            remaining_exit: "",
        },
    },
    computed: {
        remainingExit () {
            return this.form.exit_value - this.form.uncovered_debt - this.form.transaction_fees
        },
        cashDividends() {

            @foreach($preferredEquities as $equity)
                @if($equity->dividends == false)
                    return  0
                @elseif($equity->dividends == true && $equity->dividend_type == 'equity')
                    return 0
                @elseif($equity->dividends == true && $equity->dividend_type == 'cash' && $equity->compounding == false)
                    var exit_date = this.form.exit_date;
                    var creation_date = moment("{{ $equity->creation_date }}");
                    //Date Difference: days
                    var days_difference = creation_date.diff(exit_date,'days');
                    var days_difference = Math.abs(days_difference);

                    // Accrual Frequency Percentage
                    var daily = (days_difference / 365) * {{ $equity->dividend_percent }};

                    //Total Cash Dividend
                    @if($equity->dividend_frequency == "Daily")
                        var cash_dividend = daily * ({{ $equity->share_price * $equity->shares_authorized }});
                    @endif
            @endforeach

            OUTPUT: need to return sum of cash_dividend for each $equity. Need help with this part
        } 
    }
});

Walter Cejas Walter Cejas · Accepted Answer · 2018-12-18T19:40:18

First save your php array in a variable/array from your data/state in the mounted() hook..
```
mounted() {
 this.dataToWork = {!! $preferredEquities !!}
}
```
Work with the data using only js, handling the js array.. don't complicate things using blade functions inside Vue.

Vuejs using foreach in computed property. Blade template

2 Answers