在做一个项目的过程中，为了对数组数组进行处理，需要给数组每一项加入一个属性，然后在嵌套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;
      },
}