[Vue警告：您可能在计算的组件渲染函数中有一个无限的更新循环

Question

我正在尝试使用一个简单的计算函数将对象列表分为上一行和下一行两行，但我不断遇到上述错误。我一直在寻找答案半天。我将不胜感激。

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>

Answer 1

确保您已声明data项目：

data() {
  return {
    data: []
  }
}

然后，在使用index而不是i的过滤器中修正拼写错误：

computed: {
  firstRow() {
    return this.data.filter((data, i) => i % 2 === 0)
  },
  secondRow() {
    return this.data.filter((data, i) => i % 2 !== 0)
  }
},

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

computed: {
  firstRow() {
    return this.data.filter((data, i) => data.id % 2 === 0)
  },
  secondRow() {
    return this.data.filter((data, i) => data.id % 2 !== 0)
  }
}

这里是demo