Question

我是PHP开发人员，具有js和vuejs的非常基础的知识，很抱歉，如果它看起来太愚蠢。我正在建立非常复杂的反应式金融计算器。附言我使用Laravel（刀片模板）并使用刀片@foreach()

将数据提取到vue中

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

问题：如何从每个SUM $equity算出我的计算值。

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

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

Answer 1

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

Answer 2

我将从刀片模板中删除逻辑，并在控制器或某些服务中的其他位置（取决于构建应用程序的方式）进行操作。然后，只需将具有该值的变量传递到刀片模板即可。这意味着您的模板更易于理解，而且保密性也较低。一旦变量进入模板，您就可以将其作为值转储到JavaScript。

Vue.js在计算属性中使用foreach。刀片模板

2 个答案: