如何计算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的{​​{1}}对象属性

＆＃13;

＆＃13;

product[variable]

＆＃13;

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"
    }],
  }
});

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以像这样获得密钥的值：

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

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