Vue.js has encountered a situation where the maximum call stack size has been exceeded

Question

Vue.js has encountered a situation where the maximum call stack size has been exceeded

I have implemented a method called cartTotal that calculates the total price of my products along with any discounts applied, and I am trying to obtain the final value by subtracting the discount from the total.

cartTotal() {
    var total = 0;
    var discount = Math.round((0.1 * this.cartTotal) * 100) / 100;
    this.cart.items.forEach(function(item) {
      total += item.quantity * item.product.price;
    });
    total -= discount;
    return total;
}

Unfortunately, I am encountering an issue as it is giving me a 'Maximum call stack size exceeded' error.

javascript vue.js

Answer 1

Answer №1

The reason for the error you're seeing is because there are two computed properties in your code that refer to each other's value. This creates a cyclical dependency, which triggers a "Maximum call stack size exceeded" error.

There are actually three distinct values at play here: 1) the total sum of all items in the cart, 2) a discount amount, and 3) the final total after applying the discount.

To resolve this issue, it's recommended to break down your logic into three separate computed properties:

computed: {
  cartSum() {
    return this.cart.items.reduce((total, item) => total += item.quantity * item.product.price, 0);
  },
  discountValue() {
    return Math.round((0.1 * this.cartSum) * 100) / 100;
  },
  cartTotal() {
    return this.cartSum - this.discountValue;
  },
}

Answer 2

The reason for the error you're seeing is because there are two computed properties in your code that refer to each other's value. This creates a cyclical dependency, which triggers a "Maximum call stack size exceeded" error.

There are actually three distinct values at play here: 1) the total sum of all items in the cart, 2) a discount amount, and 3) the final total after applying the discount.

To resolve this issue, it's recommended to break down your logic into three separate computed properties:

computed: {
  cartSum() {
    return this.cart.items.reduce((total, item) => total += item.quantity * item.product.price, 0);
  },
  discountValue() {
    return Math.round((0.1 * this.cartSum) * 100) / 100;
  },
  cartTotal() {
    return this.cartSum - this.discountValue;
  },
}

Vue.js has encountered a situation where the maximum call stack size has been exceeded

Answer №1

Similar questions

Express always correlates the HTTP path with the most recently configured route

The console correctly detects the value, but is unable to set the innerHTML property of null

javascript implement a process to iteratively submit a form using ajax

Issue with Laravel: Using `$request->all()` results in an empty array when called using JSON XHR

Using JQuery to fill an HTML dropdown menu with data from a JSON file

When invoked, a Javascript Object comes back empty

What changes should I make to my save function in order to handle both saving and editing user information seamlessly?

Despite providing the correct token with Bearer, Vue 3 is still experiencing authorization issues

Troubleshooting error in WordPress: Changing innerHTML of dynamically created divs using JavaScript. Issue: 'Unable to set property innerHTMl of null'

Angular 2 signal sender

Displaying foreign exchange rates using Shield UI Chart

Having issues updating cookies with jQuery in ASP.NET framework

The connections of directives

Why is the location search not staying centered after resizing the map on Google Maps?

Vue js version 2.5.16 will automatically detect an available port

"Converting jQuery Form into a Wizard feature with the ability to hide specific steps

There seems to be an issue with the CSV file, possibly indicating an error or the file may not be an SYLYK file when

Angular mat-select is having difficulty displaying options correctly on mobile devices or devices with narrow widths

What methods and applications are available for utilizing the AbortController feature within Next.js?

Having trouble implementing server-side rendering with Styled-Components in Next JS