vue循环报错：You may have an infinite update loop in a component.

出于UI的需要，我在v-for循环中绑定class，绑定的是一个methods中函数。代码如下

<div :key="item.News_id" v-for="(item, key) in newsList" :class="classObject(item,key)">
 ......
</div>

classObject方法定义在methods中，最初直接从入参item中取出了需要的字段直接进行了操作，控制台中就出现题目上的报错。

所以就将传入的item对象进行了克隆。代码如下：

classObject(item,key) {
  let current = {...item};
  let date = current.s_Issued_date.substring(0,10);
  ......
}

克隆对象还有其他的方法，我这里使用了我认为看起来最简洁的方式。

经过这样处理以后，我的控制台还是报错，但是经过排查以后，报错的原因已经不是因为直接操作传入的对象了。

我的代码中还有这样一段：

switch (this.color) {
  case 1:
    this.color = 2;
    break;
  case 2:
    this.color = 3;
    break;
  case 3:
    this.color = 1;
    break;
}

这段代码同样会造成这个问题，我为了给循环中的列表显示不同的颜色，对颜色进行了匹配，

在

data(){

    return {

        color: 3

    }

}

中定义了color属性

我在switch中重复对它的值进行了操作，导致了无限循环的可能性。

修改后代码如下：

switch (color) {
  case 1:
    color = 2;
    break;
  case 2:
    color = 3;
    break;
  case 3:
    color = 1;
    break;
}

依旧是匹配color，但是color不再定义在data返回对象中，而是定义在局部变量里。

<script>
  import API from "../../api/API.js";
  let color = 1;
  export default {}

报错问题得以解决。