我不确定问题标题是否是完成我想要做的事情的最佳方式，但首先让我解释一下问题：
我有一个 Vue 根组件，其属性在 data 键中定义，例如 months。在 DOM 中，我使用 v-for="month in months" 遍历属性。这些month 对象中的每一个都具有orders 的列表，并且对于每个order in orders，一行显示一行，其中包含order.date 和order.total 等信息。这一切都很好。
现在我希望底行显示每个月的累计总数，但这不能作为预先计算的属性，所以我的第一个猜测是使用计算属性。但是如何定义不依赖于根组件但依赖于迭代属性的每个子级的计算属性？
另一种解决方案可能是使用组件，但我不想在组件内定义模板，而是使用 HTML 中定义的模板。我还没有找到一种方法来做到这一点。这可能吗？还有其他我忽略的可能解决方案吗？
【问题讨论】：
标签： vue.js vuejs2 vue-component
我已经按照您的要求在计算属性中解决了它。如果您发现有趣的东西，请检查它。
<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))
}
}
}
【讨论】：
total 属性的 month 对象不可能按照我最初想要的方式进行？
month 对象中都有 total 属性。不过没那么重要，你的方式行得通
正如经常发生的那样，我在提出这个问题后不久就找到了解决方案。我现在做的是：
在根组件中定义一个属性如下：
total: function (month) {
// calculate total
},
在 DOM 中，我使用 {{ total(month) }} € 显示它
这可能不是一个理想的解决方案，但目前可以。如果有人有更好的解决方案，我仍然会很感激你的意见，因为我还是 vue.js 的新手
【讨论】：
我认为最好的方法是为每个月创建一个组件（如果确实需要，也可以为每个订单创建一个组件）。如果你想避免这种情况，你可以在月份标记中说（假设订单是一个数字数组）：
<p class="orders_total">{{month.orders.reduce((acc, el, i, arr) => acc + el )}}</p>
这不是一个好习惯，因为我们不应该在标记中定义这样的数组转换，但它应该可以工作。
【讨论】：