The computed function in Vue.js fails to provide a return value

Question

The computed function in Vue.js fails to provide a return value

I'm currently experimenting with a basic to-do list using vue.js. My goal is to calculate the total sum of all price values within an array. I created a small function under computed, but it seems like something isn't working correctly. Here's the snippet of my js code:

var app= new Vue({
  el: "#app",
  data: {
    message: "Shopping List",
    seen: true,
    todos: [
      {msg: 'parsley', price: 10},
      {msg: 'tomatoes', price: 20},
      {msg: 'zucchinis', price: 5}
    ],
  },
  methods: {
    addToDo: function() {
      if(this.name && this.price) {
        this.todos.push({msg: this.name, price: this.price});
      }
      this.name   = "";
      this.price = "";
    },
    RemoveThis: function(index) {
      this.todos.splice(index,1);
    }
  },
  computed: {
    totalSum: function() {
      var total = 0;

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

      return total;
    }
  }
});

There seems to be an issue with the forEach loop causing the function to break. Any insights on what might be wrong?

javascript foreach vue.js

Answer 1

Answer №1

When you pass the callback function to forEach, keep in mind that this doesn't refer to the component but is instead set to undefined by default.

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

The callback function takes each todo as an argument, so an example implementation would appear like this:

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

In practice, it's preferable to avoid using forEach and opt for reduce. When combined with an arrow function, it can be simplified into a neat one-liner:

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

Answer 2

When you pass the callback function to forEach, keep in mind that this doesn't refer to the component but is instead set to undefined by default.

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

The callback function takes each todo as an argument, so an example implementation would appear like this:

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

In practice, it's preferable to avoid using forEach and opt for reduce. When combined with an arrow function, it can be simplified into a neat one-liner:

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

Answer 3

Answer №2

Misusing the forEach method

For example:

var total = 0;
var arrayOfObjects = [{price: 10},{price: 20},{price : 30}];

// Proper implementation:
arrayOfObjects.forEach(function(obj) {
  total += obj.price;
})

console.log(total)

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

Answer 4

Misusing the forEach method

For example:

var total = 0;
var arrayOfObjects = [{price: 10},{price: 20},{price : 30}];

// Proper implementation:
arrayOfObjects.forEach(function(obj) {
  total += obj.price;
})

console.log(total)

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

Answer 5

Answer №3

Revise the code

this.items.forEach(function(){
    sum += this.items.cost
  });

with

this.items.forEach(function(data){
    sum += data.cost
  });

Answer 6

Revise the code

this.items.forEach(function(){
    sum += this.items.cost
  });

with

this.items.forEach(function(data){
    sum += data.cost
  });

The computed function in Vue.js fails to provide a return value

Answer №1

Answer №2

Answer №3

Similar questions

Is there a javascript file storing an image?

express: how to differentiate routing path based on request parameters

How do I adjust the controls in Three.js to align with the previous camera position?

Can you please tell me the title of my Vue component?

Adjusting image size according to browser dimensions

Tips for altering the appearance of a dropped item using JQueryUI sortable

Sharing data between Vue.js v2 components and updating the parent when it's modified

Tips for transferring a JavaScript object to a Node.js server

How can a false validation be conducted on knockout js?

Creating a nested function and utilizing the return statement in JavaScript

Is there a way to deactivate all dot inputs on number type input in vue.js 2?

Determining the position coordinates of an element in relation to the viewport using JavaScript, regardless of its relative positioning

In JavaScript, how is the symbol "." referred to as?

Restricting the input on a React component to only accept alphabet characters from A to Z instead of allowing any keyboard

Having trouble with the date format in the highCharts range selector?

For every iteration, verify the presence of the image

Encountering syntax errors in GraphQL

Waiting for data to be passed from a parent component within a method

Experiencing issues calling a function in Vue.js while working with the SDK JavaScript?

How can I use D3.js to form a circular group in an organization structure, link it with a circular image, and connect