Vuejs 在计算属性中使用 foreach。刀片模板答案

【问题标题】：Vuejs using foreach in computed property. Blade templateVuejs 在计算属性中使用 foreach。刀片模板
【发布时间】：2019-05-19 06:37:17
【问题描述】：

我是 PHP 开发人员，对 js 和 vuejs 有非常基本的了解，如果看起来太愚蠢，请见谅。我正在构建非常复杂的反应式金融计算器。附：我在 Laravel（刀片模板）上工作并使用刀片 @foreach() 将数据提取到 vue 中

我的问题是计算属性。我需要从非常复杂的数学公式中找到一个值（下面的代码显示了整个想法的一小部分。在我计算的cashDivideds() 函数上，我需要进行一些数学运算以找到数组中每个对象的值。我使用这种方式：@ 987654323@。经过所有计算，我得到了正确值的输出，但仅适用于数据库中的第一个$equity。

问题：如何从每个$equitySUM 我的计算值。

在我的代码下面，希望有足够的信息来理解我的问题。

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

【问题讨论】：

标签： javascript laravel vue.js laravel-blade

【解决方案1】：

我会从刀片模板中删除逻辑，然后在控制器或某些服务中的其他地方执行此操作（取决于您构建应用程序的方式）。然后只需将带有值的变量传递给刀片模板。这意味着您的模板更容易理解且不那么神秘。一旦变量在模板中，您就可以将其作为值转储到 JavaScript。

【讨论】：

我也会这样做，但是对于计算，我必须使用少量 DOM 输入 :(
我不确定我是否理解。你可以把所有的数据交给前端，然后在前端执行逻辑？

【解决方案2】：

首先将您的 php 数组保存在从mounted() 钩子中的数据/状态中的变量/数组中..
```
mounted() {
 this.dataToWork = {!! $preferredEquities !!}
}
```
仅使用 js 处理数据，处理 js 数组。不要使用 Vue 中的刀片函数使事情复杂化。

【讨论】：