为什么 lodash 的 _.sum() 函数会使 Vuejs 对象失败答案

【问题标题】：Why does lodash's _.sum() function fail Vuejs objects为什么 lodash 的 _.sum() 函数会使 Vuejs 对象失败
【发布时间】：2018-09-30 07:11:35
【问题描述】：

我正在使用 Vuejs 和 Lodash，并且我有一个计算属性，它只是对集合的属性求和。我以前为此使用过_.sum()，但是当我将它与vuejs vm一起使用时，它似乎只是连接字符串[object Object]！

我发了jsfiddle with the following code:

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", time: 5 },
      { text: "Learn Vue", time: 10 },
      ]
  },
  computed: {
    additup() { return _.sum(this.todos, todo => todo.time ) },
    additup2() { return _.sum(this.todos, function (todo) {
      return parseInt(todo.time);
    })} },
    additup3() { 
      var t = 0; 
      _.each(this.todos, function(todo) { t+=todo.time; }); 
      return t; 
    }
  }
})

输出是：

方法一给出：[object Object][object Object]
方法2给出：[object Object][object Object]
方法 3 给出：15

有没有办法修复_.sum()？或者一种解决我对它为什么不起作用的理解的方法;-)

【问题讨论】：

标签： javascript vue.js lodash

【解决方案1】：

使用sumBy 代替sum：

这个方法类似于_.sum，除了它接受iteratee，它是为数组中的每个元素调用以生成要求和的值。使用一个参数调用迭代对象：（值）。

【讨论】：

啊，我想他们一定是从 _.sum() also took an iteree 的早期版本更改了 API。谢谢。

【解决方案2】：

试试这个：

additup() { return _.sum(this.todos.map(todo => todo.time)) },

【讨论】：

【解决方案3】：

你是设置在_.sum 然后映射吗？因为你可以简单地这样做：

additup() { return _.sumBy(this.todos, 'time') }

或者使用 ES6，您可以通过以下方式变得更短：

additup = () => _.sumBy(this.todos, 'time')

这实际上是_.sumBy 主要用例。

【讨论】：