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

Question

我试图在一个对象中总结一些属性。 我正在使用VueJS过滤器，结合ES5减少功能来累加数字以获得总数。

嗯，现在还不行。 有人在乎帮我吗？

 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

你可以像这样得到key的值：

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

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