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