vue中使用v-for的错误案例

vue中使用v-for的错误案例

[Vue warn]: You may have an infinite update loop in a component render function.

错误代码及结果图

//html代码块
<div class="resultsClass">
    <div v-for="(yItem, yIndex) in getSumResult(inputForm.scheduleRelationList)" :key="yIndex">
        <p v-if="yItem.feedBackFlag === '1' && yItem.sum > 0"><span style="color: #FF0000"><i class="iconfont icon-pdUnFinsh"></i> 未反馈 {{yItem.sum}}</span> （{{yItem.names}}）</p>
        <p v-if="yItem.feedBackFlag === '2' && yItem.sum > 0"><span style="color: #40BD37"><i class="iconfont icon-chenggongtishi"></i> 已同意 {{yItem.sum}}</span> （{{yItem.names}}）</p>
        <p v-if="yItem.feedBackFlag === '3' && yItem.sum > 0"><span style="color: #145FAA"><i class="iconfont icon-shixiao"></i> 已拒绝 {{yItem.sum}}</span> （{{yItem.names}}）</p>
    </div>
</div>
//js代码块
getSumResult (data) {
	// 数据处理过程
}

错误分析

v-for指令通常只用来读取数据，而非写入响应数据

解决方法

1、让后端处理好需要的数据，前端只做渲染（一般会被打太极打回来，前端处理不了的就只能坚持了）
2、可以在获取数据时进行数据处理存放到data里，然后在v-for处渲染