Question

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

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; 
    }
  }
})

输出为：

方法1给出：[对象对象] [对象对象]
  方法2给出：[对象对象] [对象对象]
  方法3给出：15

是否可以解决_.sum()？或者一种让我了解为什么它不起作用的方法;-）

Answer 1

尝试以下方法：

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

Answer 2

使用sumBy代替sum：

此方法类似于_.sum，但它接受iteratee，即为数组中的每个元素调用以生成要求和的值。使用一个参数（值）调用iteratee。

Answer 3

您是否已在_.sum上设置，然后进行映射？因为您可以轻松做到：

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

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

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

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

为什么lodash的_.sum（）函数使Vuejs对象失败

3 个答案: