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

【问题标题】：V-for add row every 2 items give me the wrong IndexV-for 每 2 项添加行给我错误的索引
【发布时间】：2019-01-06 10:24:42
【问题描述】：

对于需要“表格”样式的设计，每 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 等等。

我怎样才能检索到真正的索引？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

事实上，您得到的是切片数组的正确索引，而不是原始数组。当您在 v-for 中的源数组上调用 slice 时，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>

【讨论】：