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指令和渲...
·
今天做东西遇到很多问题,现在都快回忆不起来了,印象特别深刻的就是:
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 || '--'
}
},
更多推荐
已为社区贡献28条内容
所有评论(0)