Vue.js computed function return nothing

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?

Have you tried a simple for-loop to see the result?

Damien
– Damien

2017-05-26 12:22:56 +00:00
Commented May 26, 2017 at 12:22 — Damien
– Damien, Commented May 26, 2017 at 12:22
yep, but i want see with forEach

Pds Ink
– Pds Ink

2017-05-26 12:29:50 +00:00
Commented May 26, 2017 at 12:29 — Pds Ink
– Pds Ink, Commented May 26, 2017 at 12:29

Linus Borg · Accepted Answer · 2017-05-26 12:26:52Z

5

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

edited May 26, 2017 at 12:26

answered May 26, 2017 at 12:25

Linus Borg

24.1k7 gold badges65 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rishipuri Over a year ago

There is no price attribute on this.todos

Linus Borg Over a year ago

Yeah, spotted my mistake a second after and corrected it.

Pds Ink Over a year ago

another thing, i suppose is more vue.js related, is correct to put that forEach in computed? Because when i add a price to an array it don't sum, it "concatenate" like 10+20 = 1020

Linus Borg Over a year ago

that has probbably more to do with the fact that values from <input> elements are strings. you have to use v-model.number="..." to make Vue turn it into a number (if you use v-model).

rishipuri · Accepted Answer · 2017-05-26 12:23:48Z

3

Wrong use of forEach

e.g.

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

answered May 26, 2017 at 12:23

rishipuri

1,52811 silver badges18 bronze badges

Comments

Manav Sharma · Accepted Answer · 2017-05-26 12:28:21Z

0

Replace code

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

to

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

edited May 26, 2017 at 12:28

answered May 26, 2017 at 12:26

Manav Sharma

1871 silver badge8 bronze badges

Collectives™ on Stack Overflow

Vue.js computed function return nothing

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related