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

最新推荐文章于 2024-02-08 15:53:40 发布

weixin_30808693

最新推荐文章于 2024-02-08 15:53:40 发布

阅读量634

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dongguapifly/p/10627087.html

版权

今天遇到一个问题，因为数据来源不是同一个数组，但是想使用连续的index。

简化了一下，代码长下面这样，实际上第一眼看是没有问题的。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>demo</title>
</head>
<body>
<div id="main">
    <table>
        <thead>
        </thead>
        <tbody>
        <tr v-for="(item, index) in arr1">
            <td >{{getIndex()}}</td>
        </tr>
        <tr v-for="(item, index) in arr2">
            <td>{{getIndex()}}</td>
        </tr>

        </tbody>
    </table>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#main',
        data: {
            arr1: [1, 2],
            arr2: [3, 4, 5],
            num:0
        },
        methods: {
            getIndex: function () {
                return ++this.num;
            }
        }
    })
</script>
</body>
</html>

但是运行会有警告，并且显示是不对的，因为渲染组件的时候，去改变了data里面的数据，data里面的数据变化又会调用render函数，从新渲染组件，这样就造成了死循环。

解决办法：

1， computed属性，将来源不同的数据合并到一个数组

2，将totalIndex这个索引变量放全局变量里面

转载于:https://www.cnblogs.com/dongguapifly/p/10627087.html

weixin_30808693

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【javascript】[Vue warn]: You may have an infinite update loop in a component render function.

今天遇到一个问题，因为数据来源不是同一个数组，但是想使用连续的index。简化了一下，代码长下面这样，实际上第一眼看是没有问题的。<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset...
复制链接

扫一扫