如何计算json对象数组中的值？ （在VueJS）

Question

我想总结一个对象中的几个属性。 我正在使用VueJS过滤器，并结合使用ES5 reduce函数来合计数字以获得总数。

嗯，这不是在这个时候工作。有人关心帮助我吗？

new Vue({ 
 
    el: '.app', 
 
    data: { 
 
    products: [{ 
 
     "pid": "37", 
 
     "pname": "Reprehenderit", 
 
     "price": "4.29", 
 
     "amount": "1" 
 
    }, { 
 
     "pid": "45", 
 
     "pname": "Sit", 
 
     "price": "1.00", 
 
     "amount": "4" 
 
    }, { 
 
     "pid": "67", 
 
     "pname": "Omnis", 
 
     "price": "7.00", 
 
     "amount": "2" 
 
    }], 
 
    } 
 
}); 
 

 
Vue.filter('subtotal', function (list, key1, key2) { 
 
    return list.reduce(function(total, item) { 
 
     return total + item.key1 * item.key2 
 
    }, 0) 
 
})

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script> 
 

 
<div class="app"> 
 
    
 
    Product example: {{ products[0].pname }} 
 
    
 
    <br><br> 
 
    
 
    Total: {{ products | subtotal 'price' 'amount' }} 
 

 
</div>

Answer 1

貌似后VUE已经构成正在初始化事件处理程序。如果您的事件在被调用时未附加，他们将被忽略。

而且，你不能引用您的对象属性一样，product.variable你需要使用product[variable]

Vue.filter('subtotal', function (list, key1, key2) { 
 
    return list.reduce(function(total, item) { 
 
     return total + item[key1] * item[key2] 
 
    }, 0) 
 
}) 
 

 
new Vue({ 
 
    el: '.app', 
 
    data: { 
 
    products: [{ 
 
     "pid": "37", 
 
     "pname": "Reprehenderit", 
 
     "price": "4.29", 
 
     "amount": "1" 
 
    }, { 
 
     "pid": "45", 
 
     "pname": "Sit", 
 
     "price": "1.00", 
 
     "amount": "4" 
 
    }, { 
 
     "pid": "67", 
 
     "pname": "Omnis", 
 
     "price": "7.00", 
 
     "amount": "2" 
 
    }], 
 
    } 
 
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script> 
 

 
<div class="app"> 
 
    
 
    Product example: {{ products[0].pname }} 
 
    
 
    <br><br> 
 
    
 
    Total: {{ products | subtotal 'price' 'amount' }} 
 

 
</div>

Answer 2

你可以得到键的值是这样的：

return total + item[key1] * item[key2] 

另外，您应该在vue实例之前设置过滤器。