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

Logo

前往低代码交流专区

更多推荐