Vuejs购物车返回NaN的总变量

Question

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

这是全部功能

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

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

total: {{total}}

Answer 1

<img>循环用于循环对象属性，而不是数组，请详细了解here

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

针对您的情况使用.forEach方法

NaN

使用reduce而不是total: function(){ let tot = 0; this.products.forEach(product => tot += product.price) return tot; }

forEach()

Answer 2

怎么样尝试自己调试呢

  for ( var product in this.products){
    console.log(product);
    tot += product.price;
}

，您将发现product是this.products的可枚举属性， 如果this.products是一个数组，它将输出0，1，2，....，您可以在这里更好地了解for..in。

因此，如果您坚持使用for..in，则最好更改为

tot += this.products[product].price;

或者您最好选择reduce来求和。

tot: function (){
    var tot = 0;
    tot = this.products.reduce((pre, next) => {
        return pre += next.price;
    }, tot);
    return tot;
}