如何在嵌套v-for循环中获取正在进行的索引

Question

我有一些嵌套循环。父组件循环一个子组件，子组件循环一个孙子组件。

<div class="parent">
   <div class="child" :v-for="(child, childindex) in children">
      <div class="grandchild" :v-for="(grandchild, grandchildindex) in grandchildren">
         Some Stuff
      </div>
   </div>
</div>

索引会给我类似的东西

Child 0
   Grandchild 0
   Grandchild 1
Child 1
   Grandchild 0
   Grandchild 1
   Grandchild 2

以此类推。

但是我需要的是这个

Child 0
   Grandchild 0
   Grandchild 1
Child 1
   Grandchild 2
   Grandchild 3
   Grandchild 4

那么我如何使孙子索引持续进行？

Answer 1

要获取“全局”孙代索引，您需要知道所有先前子代中有多少个孙代，然后将该数字增加当前孙代索引。

虽然有点难看，但是以下代码应该可以工作：

<div class="parent">
   <div class="child" :v-for="(child, childindex) in children">
      <div class="grandchild" :v-for="(grandchild, grandchildindex) in child.grandchildren">
         Current global grandchild index:
        {{ children.slice(0, childindex)
                   .reduce((total, ch)=>total+=ch.grandchildren.length, 0)
                   + grandchildindex }}
      </div>
   </div>
</div>

相关代码（带注释）：

// Get an array of all the previous children.
children.slice(0, childindex)
// Calculate the total length of all their grandchildren.
.reduce((total, ch)=>total+=ch.grandchildren.length, 0)
// Add the "current" grandchild index to it.
+ grandchildindex