如何在不引发无限更新循环警告的情况下，从v-for循环中增加Vue JS中的计数器

Question

我有以下简单的v-for循环：

<div class="HolderRow" v-for="(row, index) in 9" :key="index">
<Holder v-for="(row, index) in 11" :key="index" :holder1="increment()" />
</div>

在每次渲染"Holder"时，我希望将计数器增加1，并将其作为道具传递给Holder。递增数据的递增方法如下：

export default {
data() {
return {
show: false,
holder: 0
};
},
methods: {
increment() {
this.holder = this.holder + 1;
return this.holder;
}
},
components: {
Holder
}

但是，问题是我从Vue得到了以下警告：

vue.runtime.esm.js？2b0e:619[Vue warn]：组件渲染函数中可能存在无限更新循环。

有没有任何方法可以在不引发此类警告/错误的情况下实现这一点？

感谢

Answer 1

这是有效的(不确定是否有其他方法(：

<div class="HolderRow" v-for="(row, rowindex) in 9" :key="rowindex">
<Holder
v-for="(holder, holderindex) in 11"
:key="holderindex"
:holder="holder + (11 * rowindex)"
/>
</div>

Answer 2

删除增量的括号。

应为:holder1="increment"

若使用方括号，则会在事件触发之前调用increment函数。

Answer 3

第一个问题是您在循环中使用相同的变量名，我建议使用另一种命名方案。然后，不是在函数中更改holder，而是看起来你只需要一个索引，这样你就可以进行index1*9+index2

<div class="HolderRow" v-for="(row1, index1) in 9" :key="index1">
<Holder v-for="(row2, index2) in 11" :key="index2" :holder1="index1*9+index2" />
</div>