在 v-for 中调用方法时无限循环

Question

我正在尝试调用一个将数据推送到数组中的方法，但是我插入的数据是多余的，我收到了这个警告：

您可能在组件渲染函数中有无限更新循环。

这是我的代码：

<v-flex xs6 md3 v-for="i in 12" :key="i">
     {{ pushShow(i) }}
</v-flex>
.
.
.
.
methods: {
   pushShow(i){
      this.show.push(i);

    }
}

我将根据数组中的数据显示具有不同行为的卡片，因此数组将类似于：[true, true, false, false, etc]

我该如何解决这个问题？感谢提前

Answer 1

您正在模板中调用pushShow(i)，而该方法正在执行this.show.push(i)，这正在改变您的数据。这将触发另一个渲染，因为 Vue 检测到数据发生了变化，这将调用pushShow(i)再次，以此类推。

您需要确保在渲染期间不会改变任何数据。如果您能提供更多关于您想要达到的目标的详细信息，我们可以为您提供解决问题的方法。