Vue.js计算函数不返回任何内容

Question

I'm practicing with a simple to-do list with vue.js . I'm trying to sum all price within an array. To do that I wrote a little function inside computed , but something has gone wrong, here is my 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;
    }
  }
});

There is something inside the forEach that is breaking the function, anyone know why?

Answer 1

inside the callback function that you passed to forEach , this does nto point to the component, it is undefined by default.

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

the callback function receives each todo as the argument, so an example would look like this:

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

Generally, I would not use forEach, I would use reduce . Together with an arrow function it becomes a nice one-liner:

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

Answer 2

Wrong use of forEach

eg

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

Refer to: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach?v=control

Answer 3

Replace code

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

to

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