在做一个项目的过程中，为了对数组数组进行处理，需要给数组每一项加入一个属性，然后在嵌套v-for循环中，使用一个method方法，渲染正常，但是控制台报错死循环。应该先将需要处理的对象复制出来进行数据筛选，然后再给到template渲染，而不是直接丢给template去渲染。
报错如下：
[Vue warn]: You may have an infinite update loop in a component render function
一、问题分析
在v-for循环当中，如果使用方法或者计算属性对vm.$data的属性进行操作，理论上，可能因为修改到循环对象，诱发无限循环，此时vue就会发出警告
//html
<div class='todo_plan_item' v-for="item in listEven(list)" >
<template v-if="item.detail!=undefined">
<plan-item :item="item"></plan-item>
</template>
</div>
//data数据
data(){
return {
list:JSON.parse(sessionStorage.getItem('planList')),
}
}
//js
methods:{
listEven:function () {
let that=this;
that.list.filter(function (plan) {
return that.$set(plan,"detail",FormatPlan(plan.ProjectId));
})
},
}
二、解决方法
具体问题不一样，但都是死循环类型，所以处理方式也是差不多的。就是先处理，再赋值渲染。
网上看到的图-尤大申的回复
代码方面的处理
//html
<div class='todo_plan_item' v-for="item in list" >
<template v-if="item.detail!=undefined">
<plan-item :item="item" ></plan-item>
</template>
</div>
// data
data(){
return {
list:[],
}
}
mounted(){
this.listEven();
}
methods:{
listEven:function () {
let that=this;
let planList=JSON.parse(sessionStorage.getItem('planList'));
planList.filter(function (plan) {
return that.$set(plan,"detail",FormatPlan(plan.ProjectId));
})
that.list=planList;
},
}
