若依分离版、vue报错：[Vue warn]: You may have an infinite update loop in a component render function.

问题描述：

页面运行正常，但刷新页面或新增文档后页面一直加载，后台报错：
[Vue warn]: You may have an infinite update loop in a component render function.
根据网上查询的结果原因基本如下：
在for循环中我使用了函数，页面刷新或新增文档时间接修改了循环响应数据而且没有终止条。页面执行渲染时，又会改变状态，于是又渲染，迟迟不能生成真实节点，所以界面一直在转圈。
原代码：
数据：

data() {return {//附件路径filepath1:{},}}

标签代码：

<el-table-column label="附件" align="center" prop="document"><template slot-scope="scope"><a v-for="(item, index3) in cat(scope.row.document)" :key="index3">{{item}}</a></template>
</el-table-column>

方法：

cat(filepath){this.filepath1 = filepath.split(",");return this.filepath1;
},

修改逻辑：
新增一个“在线查看”按钮的事务用来给v-for所需的循环变量赋值，v-for循环时不使用函数，而是使用data中的值进行循环。
修改后代码：
数据：

data() {return {//附件路径filepath1:{},}}

标签代码：

<el-table-column label="附件" align="center" prop="document"><template slot-scope="scope"><el-button @click="cat(scope.row.document)">在线查看</el-button><p v-show="seetype" v-for="(item, index3) in filepath1" :key="index3" ><a @click="preView(item)" target="_blank" class="buttonText" style="color: #00afff;text-decoration:underline">{{item}}</a></p></template>
</el-table-column>

方法：

cat(filepath){this.filepath1 = filepath.split(",");
},

结果：
点击“在线查看”获取数据，v-for循环正常。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！