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

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

......

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返回对象中,而是定义在局部变量里。


                    
                    

你可能感兴趣的:(Vue.js,vue)