currently I am facing the problem that Vue issues a warning: "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 can't figure out where the error should be. I iterate over 2 loops and then want to give a counter value to the component inside, which is then passed on and then interpreted by modulus to CSS classes in 3rd level. Unfortunately I have to do it this way, because the created components are parts of a dynamically created CSS grid. I would like to provide virtually every row, so all cells at the same height with a uniform "even/odd" class.
Here is the vue-component that creates 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>
This increment value is generated and successfully passed through to the last component despite the warning. But how can I make it work without the warning? I have already tried a few things. But I can't get any further.
I can't do this with CSS selectors, because I want to work with fixed classes.
Thanks in advance for your tips.
I figured out, the each grid-swim-lane component's this.$.uid value is not sequential, but in sequence even and odd :-)
So i use this value to determine the 'even' and 'odd' css-class:
<template>
<!-- ------------------ BEGIN LEFT SIDE BAR ------------------ -->
<grid-swim-lane-info
:grid-row-even-odd-count="gridRowEvenOddCount"
/>
<!-- ------------------ BEGIN RELEASES ------------------- -->
<grid-swim-lane-releases
:grid-row-even-odd-count="gridRowEvenOddCount"
/>
</template>
<script>
import GridSwimLaneInfo from "./GridSwimLaneInfo";
import GridSwimLaneReleases from "./GridSwimLaneReleases";
export default {
components: {
GridSwimLaneInfo, GridSwimLaneReleases
},
props: {
component: { type: Object, default: { id: 0, name: 'no-component'} }
},
data() {
return {
gridRowEvenOddCount: 0
}
}
mounted() {
this.gridRowEvenOddCount = this.$.uid;
}
}
</script>
<style scoped></style>