VUEjs 3警告:超过最大递归更新

Question

目前我面临的问题是Vue发出警告:超过最大递归更新。这意味着您有一个反应性效果，它正在改变自己的依赖关系，从而递归地触发自己。可能的来源包括组件模板,渲染功能,更新钩或观察者源函数!">

我不知道错误应该在哪里。我迭代了2个循环，然后想给里面的组件一个计数器值，然后传递，然后通过第三级CSS类的模数解释。不幸的是，我不得不这样做，因为创建的组件是动态创建的CSS网格的一部分。我想提供几乎每一行，所以相同高度的所有单元格都具有统一的"偶数/奇数"。类。

下面是创建这个增量的vue组件:

<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>

生成这个增量值，并成功传递给最后一个组件，尽管有警告。但我怎么能在没有警告的情况下让它工作呢?我已经尝试了一些东西。但是我再也走不动了。

我不能在CSS选择器中这样做，因为我想使用固定的类。

提前感谢你的提示。

Answer 1

我发现，每个grid-swim-lane组件的this.$.uid值不是顺序的，而是偶数和奇数的顺序:-)

所以我使用这个值来确定'偶数'和'奇数' 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>