【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="tex

K3v

8329人浏览 · 2018-09-20 00:05:07

K3v · 2018-09-20 00:05:07 发布

今天遇到一个问题，因为数据来源不是同一个数组，但是想使用连续的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这个索引变量放全局变量里面

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^