javascript - Vuejs购物车返回NaN的总变量

我正在使用vuejs构建购物车系统，想知道为什么我的总变量返回NaN而不是计算所有产品的总价。

这是总功能

total: function(){
    var tot = 0;
    for ( var product in this.products){
        tot += product.price;
    }
    return tot;
}

这就是我在模板中显示它的方式

total: {{total}}

最佳答案

for in循环用于循环对象属性，而不是数组，请阅读有关它的更多信息here

您可以使用它来循环数组，但要获取产品的索引，而不是产品本身。因此，当您执行tot += product.price;时，您要添加0（tot的第一个值）和undefined，这将为您提供NaN

在这种情况下使用.forEach方法

total: function(){
  let tot = 0;
  this.products.forEach(product => tot += product.price)
  return tot;
}

用reduce而不是forEach()

total: function(){
  return this.products.reduce((tot, product) => tot += product.price, 0)
}

关于javascript - Vuejs购物车返回NaN的总变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51623329/