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

Posted 2023-02-22

【中文标题】如何计算 json 对象数组中的值？ （在 VueJS 中）

【英文标题】：How to count values in an json object array? (In VueJS)

【发布时间】：2016-03-20 12:25:30

【问题描述】：

我试图总结一个对象中的几个属性。 我正在使用 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>

【参考方案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>

【讨论】：

谢谢！一个完整且非常明确的答案:) 不知道我必须先初始化过滤器......

【参考方案2】：

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

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

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