如何在Vue js中为模板中的多维数组设置正确的索引

Question

我有Vue和多维数组像这样：

myArray = [[1,2,3],[1,2,3],[1,2,3]]

而且我需要获得这样的HTML结构（数据项计数器始终在计数）：

<div class="row" data-row="0" >
     <div class="item" data-item="0"></div>
     <div class="item" data-item="1"></div>
     <div class="item" data-item="2"></div>
</div>
<div class="row" data-row="1" >
     <div class="item" data-item="3"></div>
     <div class="item" data-item="4"></div>
     <div class="item" data-item="5"></div>
</div>
<div class="row" data-row="2" >
     <div class="item" data-item="6"></div>
     <div class="item" data-item="7"></div>
     <div class="item" data-item="8"></div>
</div>

这是我的Vue代码：

<div class="row" v-for="(row, index) in myArray" :data-row="index" :key="index">
     <div class="item" v-for="(item, index) in row" :data-item="index" v-bind:key="index"></div>
</div>

但是我得到这样的结构：

<div class="row" data-row="0" >
     <div class="item" data-item="0"></div>
     <div class="item" data-item="1"></div>
     <div class="item" data-item="2"></div>
</div>
<div class="row" data-row="1" >
     <div class="item" data-item="0"></div>
     <div class="item" data-item="1"></div>
     <div class="item" data-item="2"></div>
</div>
<div class="row" data-row="2" >
     <div class="item" data-item="0"></div>
     <div class="item" data-item="1"></div>
     <div class="item" data-item="2"></div>
</div>

如何获得data-item计数器在这种情况下使用Vue从0开始到8结束？

感谢您的帮助。

Answer 1

<div class="row" v-for="(row, index) in myArray" :data-row="index" :key="index">
     <div class="item" v-for="(item, subindex) in row" :data-item="index*row.length+subindex" v-bind:key="subindex"></div>
</div>