Question

我不确定问题标题是否是完成我想做的事情的最佳方法，但首先让我解释一下问题：

我有一个Vue根组件，该组件具有在data键中定义的属性，例如months。在DOM中，我使用v-for="month in months"遍历属性。这些month对象中的每个对象都有一个orders的列表，并且对于每个order in orders，一行显示一行，并带有诸如order.date和order.total之类的信息。一切正常。

现在，我希望最下面的行显示每个月的累计总数，但这不能作为预先计算的属性使用，因此我的第一个猜测是使用计算出的属性。但是，如何定义不依赖于根组件而是依赖于迭代属性的每个子元素的计算属性？

另一种解决方案可能是使用组件，但是我不想在组件内部定义模板，而是使用HTML中定义的模板。我还没有找到一种方法来做到这一点。这可能吗？还有其他我可能忽略的解决方案吗？

Answer 1

我认为最好的方法是为每个月（以及确实需要的每个订单）创建一个组件。如果您想避免这种情况，可以在月份标记中说（假设订单是数字数组）：

<p class="orders_total">{{month.orders.reduce((acc, el, i, arr) => acc + el )}}</p>

这不是一个好习惯，因为我们不应该在标记中定义这种数组转换，但是应该可以。

Answer 2

我已根据需要在通勤物业中解决了该问题。如果发现有趣的东西，请检查它。

<template>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
            <div v-for="(month,index) in months" :key="index">
                <p>{{ month.name }}</p>
                <ul>
                    <li v-for="(order,index) in month.orders" :key="index">
                        {{ order.title}} Total :{{ order.total}}
                    </li>
                </ul>
                Total for {{ month.name}}: {{ totalMonth[index]}}
                <hr>

            </div>
        </div>
    </div>
</div>

<script>
export default {
    data () {
        return {
            months:[
                {   name: 'January',
                    orders: [
                        {title: 'order1', total: 5},
                        {title: 'order2', total: 8},
                        {title: 'order3', total: 1}
                        ]
                },
                {   name: 'February',
                    orders: [
                    {title: 'order4', total: 15},
                    {title: 'order5', total: 3}
                    ]
                },
                {   name: 'March',
                    orders: [
                    {title: 'order6', total: 25}
                    ]
                }
            ]
        }
    },
    computed: {
        totalMonth () {
            return this.months.map(a => a.orders.map(a => a.total).reduce((a,b) => a + b))
        }
    }
}

Answer 3

由于经常发生，提出这个问题后不久我就找到了解决方案。我现在正在做的是：

在根组件中定义属性，如下所示：

total: function (month) {
    // calculate total
},

在DOM中，我使用{{ total(month) }} €

显示它

这可能不是理想的解决方案，但目前可以使用。如果有人有更好的解决方案，我还是会很感激的，因为我还是vue.js的新手。

VueJ：迭代属性内的计算属性

3 个答案: