vue You may have an infinite update loop in a component render function 报错的原因

今天做东西遇到很多问题，现在都快回忆不起来了，印象特别深刻的就是：

vue You may have an infinite update loop in a component render function 

通过百度，看文章，才明白：

在v-for当中，如果在循环当中调用了方法，而在方法当中去修改data中属性的值，就会导致这样的问题。

至于为何会如此，这怕是要去研究v-for指令和渲染的机制了

我是在使用table的时候，页面mounted的时候从后台请求数据，赋值给tableData,然后就循环展示，但是我在列表里面添加了这个属性：:formatter = "statedirection"，这个方法去处理这一列的数据，比如转换成百分比之类的。 所以就报了这个错误。emmmmmmm。

解决方法一：

使用全局的formatter

// 使用  :formatter="$formatter.tableColEmpty"
<el-table-column prop="evidenceName"
                :formatter="$formatter.tableColEmpty"
                show-overflow-tooltip
                label="名称">
</el-table-column>
 
// 定义 可以在main.js文件中
import Formatter from './formatter.js'
Vue.prototype.$formatter = Formatter
 
// formatter.js
const Formatter = {
  // 处理列表-数据为空时的展示
  tableColEmpty (row: object, column: object, cellValue?: string | undefined) {
    return packEmpty (cellValue, zhCn = false) {
      return cellValue|| (zhCn ? '无' : '--')
     }
  }
}
 
export default Formatter

 解决方法二：

使用当前页面的过滤器

// 使用 
<el-table-column align="left"
                 label="名称"
                  show-overflow-tooltip>
     <template slot-scope="scope">
       <span>{{ scope.row.name| filterEmpty }}</span>
     </template>
</el-table-column>
 
// 过滤器---格式化空数据展示
  filterEmpty (val: string) {
    return packEmpty (val) {
        return val || '--'
    }
},