Recently, I've encountered a warning from Vue that says: "Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function."
I'm having trouble pinpointing where the error lies. I go through 2 loops and then assign a counter value to the component inside, which is then passed on and interpreted by modulus to apply CSS classes in the 3rd level.
This setup is necessary because the components created are part of a dynamically generated CSS grid where I want to ensure that each row has uniform "even/odd" classes for all cells at the same height.
Here's the vue-component responsible for this increment:
<template>
<template v-for="(project, p) in projects" :key="project.id">
<template v-for="(component, c) in project.components" :key="component.id">
<grid-swim-lane
:project="project"
:component="component"
:grid-row-even-odd-count="evenOddCount++"
/>
</template>
</template>
</template>
<script>
import GridSwimLane from "./GridSwimLane";
import {mapGetters} from "vuex";
export default {
components: { GridSwimLane },
data() {
return {
evenOddCount: -1
}
},
computed: {
...mapGetters('projects', { projects: 'getAllProjects' })
},
}
</script>
<style scoped></style>
The issue persists despite successfully passing the increment value to the last component. Any suggestions on how to resolve this warning? I've tried various approaches but haven't made progress.
Using CSS selectors is not an option for me as I need to work with fixed classes.
Appreciate any insights or tips you may have. Thank you!