我有一个数组,其中包含所有订单的详细信息(订单时间、订单详细信息、价格等),我想查找每个月的总价格并将它们全部放入一个数组中。
data(){
checks:[//there is data from database]
months:["2019-01","2019-02","2019-03","2019-04","2019-05","2019-06","2019-07","2019-08","2019-09","2019-10","2019-11","2019-12"],
monthlyTotal:0,
monthlyTotalsArr:[]
},
computed:{
calcTotalMonthly(){
for(let i=0; i<this.months.length; i++){
this.checks.forEach((item => {
if(item.orderTime.includes(this.months[i])){
item.bill.forEach(prod => {
this.monthlyTotal += parseInt(prod.price);
});
}
}));
this.monthlyTotalsArr.push(this.monthlyTotal);
this.monthlyTotal = 0;
} return this.monthlyTotalsArr;
}
}
当我运行此命令时,出现错误[Vue warn]: You may have anInfinite update loop in a component render function.
,并且monthlyTotalsArr.length
将类似于1220.
如果我删除 this.monthlyTotalsArr.push(this.monthlyTotal);
和 console.log(this.monthlyTotal);
我只会看到 12 个结果,因为它应该是是的,但我不知道为什么 push
函数会中断循环。这是我的问题,最后我想在 monthlyTotalsArr
中看到 12 个不同的元素。
最佳答案
计算属性不应有副作用。在本例中,您要同时修改 monthlyTotal
和 monthlyTotalsArr
。没有必要这样做,您只需在函数内使用局部变量,然后返回计算值即可。
发生的情况是 monthlyTotalArr
被注册为该计算属性的依赖项。但是您随后立即更改它,这会将计算属性标记为需要重新计算。它不断地循环尝试重新计算它,但每次它的依赖项发生变化时,它都需要再次循环。
你应该能够这样写:
calcTotalMonthly () {
return this.months.map(month => {
let monthlyTotal = 0
for (const check of this.checks) {
if (check.orderTime.includes(month)) {
for (const prod of check.bill) {
monthlyTotal += parseInt(prod.price)
}
}
}
return monthlyTotal
})
}
我已将 forEach
调用交换为 for
/of
循环。这不是必需的,但我认为这更容易遵循。我已将主循环改为使用 map
,因为这似乎就是它真正在做的事情。
如果您想在其他地方引用该数组,则可以将 calcTotalMonthly
重命名为 monthlyTotalsArr
。 data
属性 monthlyTotal
和 monthlyTotalsArr
在我的版本中均被删除。
我没有尝试解决 3 个嵌套循环带来的潜在性能问题。
关于javascript - 当我在代码中添加 .push 函数以进行循环中断时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57760879/