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

发布于 2022-09-02 23:28:31 字数 1054 浏览 28 评论 0

有两个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,从内层调用外层循环索引的值,并没有随着循环的继续,索引值发生变化。
请问,这样的情况如何让内层循环获取外层循环的索引值的内容是正确的呢。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

稀香 2022-09-09 23:28:31

亲测有效:

N层v-for 里面, 当前层的 index 可以通过 `$index` 得到 ,上一层的通过 `$parent.$index`, 在向上也是如此,以此类推!!!
成熟的代价 2022-09-09 23:28:31

错误的答案:
v-for里显式显式声明索引变量,例如i,j


更新:
尝试了一下,v-for作用于对象的时候的确不能显式声明,然后曲线了一把,https://jsfiddle.net/GoldyMark/7c9cptm2/1/
但只有一个对象的情况下是可以用$index的,参考资料:http://cn.vuejs.org/guide/list.html#对象-v-for

青衫负雪 2022-09-09 23:28:31

http://cn.vuejs.org/guide/list.html#对象-v-for
也可以给对象的键提供一个别名:

<div v-for="(key, val) in object">
{{ key }} {{ val }}
</div>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文