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

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

<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 2
   Grandchild 3
   Grandchild 4

那么，我如何才能继续获取孙子索引呢？

要获取“全局”孙子索引，您需要知道在所有以前的子项中有多少孙子，然后根据当前孙子索引增加该数字

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

<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>

<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