V-每2项添加行会给我错误的索引

Question

对于设计需要“表格”样式，每2 Item我需要一行。正面效果很好。但是我的v模型基于Item的索引（item_index），并且我的代码没有给我期望的索引：

new Vue({
  el: '#demo',
  data: {
    items: [
      'item 0',
      'item 1',
      'item 2',
      'item 3',
      'item 4',
      'item 5',
      'item 6',
      'item 7',
      'item 8',
      'item 9',
      'item 10'
    ]
  }
})

.row {
  padding: 10px;
}

span {
  background: rgba(255,0,0,.3);
}

span:nth-child(odd) {
  background: rgba(0,255,0,.3);
}

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <div class="row" v-for="i in Math.ceil(items.length / 2)">
    <span v-for="(item, item_index) in items.slice((i - 1) * 2, i * 2)">
  {{ item }} &bull; v-model => {{ item_index }}
</span>
  </div>
</div>

如您所见，对于我的v模型，我得到0; 1; 0; 1; 0; 1等。

我想要0; 1; 2; 3; 4; 5等

如何检索真实索引？

Answer 1

实际上，您获得的是切片数组的正确索引，而不是原始数组的索引。当您在slice中的源数组上调用v-for时，item_index是为数组的2个元素计算的，这就是为什么只有0、1、0、1等的原因。

您必须基于两个v-for循环中的索引来计算该索引。
在这种情况下就是(i-1)*2 + item_index。

new Vue({
  el: '#demo',
  data: {
    items: [
      'item 1',
      'item 2',
      'item 3',
      'item 4',
      'item 5',
      'item 6',
      'item 7',
      'item 8',
      'item 9',
      'item 10'
    ]
  }
})

.row {
  padding: 10px;
}

span {
  background: rgba(255,0,0,.3);
}
span:nth-child(odd) {
  background: rgba(0,255,0,.3);
}

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <div class="row" v-for="i in Math.ceil(items.length / 2)">
    <span v-for="(item, item_index) in items.slice((i - 1) * 2, i * 2)">
  {{ item }} - v-model = {{ (i-1)*2 + item_index }}
</span>
  </div>
</div>