Vue.js [Vue warn]：组件渲染函数中可能存在无限更新循环

我试图用一个简单的计算函数将一个对象列表分成两行——上行和下行，但我一直得到上面的错误。我已经找了半天的答案了。我将感谢任何帮助

index.vue

computed: {
    firstRow() {
      return this.data.filter((data, i) => index % 2 === 0)
    },
    secondRow() {
      return this.data.filter((data, i) => index % 2 !== 0)
    }
  },
  mounted() {
    this.data = [{ id: 1 }, { id: 2 }, { id: 3 }]
  },

index.vue模板

<template>
 <div>
   {{ firstRow }}
    ------------
   {{ secondRow }}
 </div>
</template>

{{firstRow}}
------------
{{secondRow}}

确保已声明您的

数据

项：

data（）{
返回{
数据：[]
}
}

然后，修复使用

索引而不是
i
的过滤器中的打字错误：

计算：{
第一行（）{
返回此.data.filter（（数据，i）=>i%2==0）
},
第二行（）{
返回此.data.filter（（数据，i）=>i%2！==0）
}
},

或者，如果您打算使用
id
：

计算：{
第一行（）{
返回此.data.filter（（数据，i）=>data.id%2==0）
},
第二行（）{
返回此.data.filter（（数据，i）=>data.id%2！==0）
}
}

这是一个
你能分享一个问题的工作演示吗这个答案解决了你的问题吗？如果是这样，请勾选此答案，这也将帮助其他人。你可以这样做。如果有什么不清楚的地方，请告诉我。