When using Vue computed, an error is thrown stating "Issue in rendering: 'InternalError: too much recursion'" if the same key is referenced in computed

Question

When using Vue computed, an error is thrown stating "Issue in rendering: 'InternalError: too much recursion'" if the same key is referenced in computed

As a newcomer to Vue, I wanted to track how many times a function in the computed section gets called. To achieve this, I created the following component:

const ComputedCounter = {
    name: "ComputedCounter",
    template: `
        <span>{{ value }}</span>
    `,
    computed: {
        value() {
            const current = this.value || 0;
            return current + 1;
        }
    }
}

Unfortunately, I encountered an error saying 'Error in render: "InternalError: too much recursion"'. I'm not sure why this is happening and if there's a solution to make it work properly.

javascript vue.js

Answer 1

Answer №1

When delving into the documentation, it states:

A computed property is triggered to re-evaluate only when its reactive dependencies have been altered.

This implies that if the value this.value changes, then the associated computed property will be activated. However, the issue arises when executing the computed property results in a change to value. Consequently, since value has changed, the computed property is executed once again, causing another change to value, initiating a never-ending cycle of execution. I hope this clarifies the situation.

Answer 2

When delving into the documentation, it states:

A computed property is triggered to re-evaluate only when its reactive dependencies have been altered.

This implies that if the value this.value changes, then the associated computed property will be activated. However, the issue arises when executing the computed property results in a change to value. Consequently, since value has changed, the computed property is executed once again, causing another change to value, initiating a never-ending cycle of execution. I hope this clarifies the situation.

Answer 3

Answer №2

There seems to be a missing stop condition in your recursive function.
Exceeding the maximum call stack size is caused by excessive recursion, indicating a JavaScript problem rather than a Vue issue.

Answer 4

There seems to be a missing stop condition in your recursive function.
Exceeding the maximum call stack size is caused by excessive recursion, indicating a JavaScript problem rather than a Vue issue.

Answer 5

Answer №3

To begin, update your data with the following:

_data: 0

Afterwards, you will be able to access this._data within your getData() function:

getData() {
    return this._data++;
}

Answer 6

To begin, update your data with the following:

_data: 0

Afterwards, you will be able to access this._data within your getData() function:

getData() {
    return this._data++;
}

Answer 7

Answer №4

If you want to keep track of how many times a computed function is called, it's important to avoid giving the counter and the computed function the same name. This can lead to the computed function calling itself infinitely, creating an endless loop.

A better approach would be to use separate variables for the counter and the computed function. Here's an example:

const ComputedCounter = {
    name: "ComputedCounter",
    template: `
        <span>{{ computedValue }}, computedValue has been called {{ counter }} times</span>
    `,
    data() {
      return {
        counter: 0,
        value: 0,
      };
    },
    computed: {
        computedValue() {
           this.counter++; // Avoid side effects in computed functions
           return this.value;
        }
    }
}

Answer 8

If you want to keep track of how many times a computed function is called, it's important to avoid giving the counter and the computed function the same name. This can lead to the computed function calling itself infinitely, creating an endless loop.

A better approach would be to use separate variables for the counter and the computed function. Here's an example:

const ComputedCounter = {
    name: "ComputedCounter",
    template: `
        <span>{{ computedValue }}, computedValue has been called {{ counter }} times</span>
    `,
    data() {
      return {
        counter: 0,
        value: 0,
      };
    },
    computed: {
        computedValue() {
           this.counter++; // Avoid side effects in computed functions
           return this.value;
        }
    }
}

When using Vue computed, an error is thrown stating "Issue in rendering: 'InternalError: too much recursion'" if the same key is referenced in computed

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Converting an array of object values to an Interface type in Typescript

Superbase Email Forwarding

Matching multiline input with RegExp and grouping matches from consecutive lines

Clever method for enabling image uploads upon image selection without needing to click an upload button using JQuery

Multer can handle the uploading of various files from multiple inputs within a single form

Ways to determine the overall cost of a shopping cart using Vuejs Vuex

Express along with Cheerio and JSDOM

What is the best way in Javascript to retrieve and process multiple stream chunks from a single API request using the fetch() method

Identify the specific element that activated the MutationObserver across multiple elements

Can the height of one div be determined by the height of another div?

Enabling the value to be set as true for radio buttons generated using v-for

Generate a variety of files using GraphicsMagick

The alignment of elements in the div seems to be slightly skewed

Guide to accessing a newly opened window from a different domain originating from the current window

Leveraging anonymous functions within an IF statement in JavaScript

Transfer information from the ajax success event to an external else/if statement

Notation for JavaScript UML component diagrams

Can someone please share a straightforward method for dynamically rendering views in Vue.js?

Various concatenated and compressed JavaScript files across multiple HTML documents within a single application

Struggling with a TypeError in React/Next-js: Why is it saying "Cannot read properties of undefined" for 'id' when the object is clearly filled with data?