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

Question

对于一个需要“表格”样式的设计，每 2 个 Item 我需要一行。它在前端工作得很好。但是，我的 v-model 是基于 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

事实上，您获得的是切片数组的正确索引，而不是原始数组的索引。当您在 v-for 中对源数组调用 slice 时，会针对数组的 2 元素片段计算 item_index，这就是为什么有只有 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>