vue.js - 循环嵌套，外层循环和内层循环，循环的内容分别是两个对象object，内层循环如何获取外层循环的索引值

问题描述

问 题

有两个v-for循环嵌套，外层循环的是一个对象，内层循环的也是一个对像，因为循环的都是对象，所以无法给索引取一个别名，只能用$index，这样外层和内层循环的索引变量都叫$index，内层循环就无法获取外层循环的索引值，代码如下：
 <div id="selectContainer">
        <div v-for="(key,dataItem) in dataObject">
        <div v-bind="cc = $index"></div>
        <template v-for="(key1,dataobj) in dataItem">
            <div>
                <div>内层循环索引值{{$index}}</div>
                <div>外层循环索引值{{cc}}</div>
            </div>
            <hr></hr>
        </template>
        <hr></hr>
        </div>
    </div>
    
    <script>
    var vm = new Vue({
        el:'#selectContainer',
        data:{
            dataObject:{
                aa:{ee:"4",ff:"5"},
                bb:{cc:"2",dd:"3"}
            },
            cc:-1
        }
    });
</script>

结果是这样的：
内层循环索引值0
外层循环索引值1
内层循环索引值1
外层循环索引值1
内层循环索引值0
外层循环索引值1
内层循环索引值1
外层循环索引值1


内层调用外层循环索引的值都是1，从内层调用外层循环索引的值，并没有随着循环的继续，索引值发生变化。
请问，这样的情况如何让内层循环获取外层循环的索引值的内容是正确的呢。

解决方案

亲测有效：

N层v-for 里面， 当前层的 index 可以通过 `$index` 得到 ，上一层的通过 `$parent.$index`, 在向上也是如此，以此类推！！！

这篇关于vue.js - 循环嵌套，外层循环和内层循环，循环的内容分别是两个对象object，内层循环如何获取外层循环的索引值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！