Question

我正在练习vue.js的简单待办事项列表。我正在尝试对数组中的所有price求和。为此，我在computed内写了一个小函数，但出了点问题，这是我的js：

var app= new Vue({
  el: "#app",
  data: {
    message: "Lista della spesa",
    seen: true,
    todos: [
      {msg: 'prezzemolo', price: 10},
      {msg: 'pomodori', price: 20},
      {msg: 'zucchine', price: 5}
    ],
  },
  methods: {
    addToDo: function() {
      if(this.nome && this.prezzo) {
        this.todos.push({msg: this.nome, price: this.prezzo});
      }
      this.nome   = "";
      this.prezzo = "";
    },
    RemoveThis: function(index) {
      this.todos.splice(index,1);
    }
  },
  computed: {
    totale: function() {
      var total = 0;

      this.todos.forEach(function() {
        total += this.todos.price
      });

      return total;
    }
  }
});

forEach内部有什么东西打破了这个功能，有人知道为什么吗？

Answer 1

在您传递给forEach的回调函数中，this无法指向该组件，默认情况下为undefined。

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

回调函数接收每个todo作为参数，因此示例如下所示：

totale: function(){
  var total = 0;
  this.todos.forEach(function (todo) {
    total += todo.price
  });
  return total;
}

一般来说，我不会使用forEach，我会使用reduce。与箭头功能一起，它成为一个很好的单行：

totale: function () {
  return this.todos.reduce((sum, todo) => sum + todo.price, 0)
}

Answer 2

错误使用forEach

e.g。

＆＃13;

var total = 0;
var arrayOfObjects = [{price: 10},{price: 20},{price : 30}];

// Correct usage:
arrayOfObjects.forEach(function(obj) {
  total += obj.price;
})

console.log(total)

＆＃13;

请参阅：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach?v=control

Answer 3

替换代码

this.todos.forEach(function(){
    total += this.todos.price
  });

到

this.todos.forEach(function(data){
    total += data.price
  });

Vue.js计算函数什么都不返回

3 个答案: