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

The error callback for Ajax is triggered even though the JSON response is valid

Tips for inserting a hyperlink on every row in Vuetables using VUE.JS

Here is a way to retrieve the name of a ref object stored in an array using Vue.js 3 and Typescript

Ways to adjust your selection to the space or new line before or after

Is it possible to employ a filter within a v-for loop?

How does assigning a checkbox's value as 'undefined' result in the addition of ng-invalid?

Retrieve the IDs of list elements in order to dynamically update a div using AJAX

prevent parent jQuery functions from interfering with child function execution

Ensure you are focusing on elements exclusively contained within the parent table and not any child tables nested within its cells

Trying to use 'cpa' before it is initialized will result in an error

Tips for displaying a slideshow within a div using JavaScript

Having trouble with Google Maps Places API autocomplete feature; it's not functioning properly

Setting up an event listener for a newly added list through the use of node appendChild

Storing a function value in a variable within a Node.js server to retrieve folder size

Unlocking fashion with $refs: A step-by-step guide

Implementing multiple filters with jQuery

The sorting function in Vue.js, _.orderBy, seems to be having trouble sorting

Get the ID from a row that was created dynamically

Are there any comparable features in Angular 8 to Angular 1's $filter('orderBy') function?

Guide on how to retrieve a specific object element within a Vue.js list using Nuxt