V-for 每 2 个项目添加一行给我错误的索引 [英] V-for add row every 2 items give me the wrong Index

问题描述

对于需要表格"样式的设计，每 2 个 Item 我需要一行.它在前端工作得很好.但是我的 v-model 基于 Item 的索引 (item_index) 而我的代码没有给我预期的索引:

new Vue({el: '#demo',数据: {项目: ['项目 0','项目 1','项目 2','项目 3','项目 4','项目 5','项目 6','项目 7','项目 8','项目 9','项目 10']}})

.row {填充:10px；}跨度 {背景:RGBA(255,0,0,.3)；}跨度:第n个孩子(奇数){背景:RGBA(0,255,0,.3)；}

<script src="https://vuejs.org/js/vue.min.js"></script><div id="演示"><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-模型=>{{ item_index }}</span>

正如你在我的 v-model 中看到的，我得到 0;1;0;1;0;1 等等.

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

如何检索真正的索引?

解决方案

事实上，您得到的是切片数组的正确索引，而不是原始数组的索引.当您在 v-for 中对源数组调用 slice 时，item_index 是为数组的 2 个元素部分计算的，这就是为什么有只有 0,1,0,1 等

您必须根据来自 v-for 循环的索引来计算该索引.
在这种情况下，这将是 (i-1)*2 + item_index.

new Vue({el: '#demo',数据: {项目: ['项目 1','项目 2','项目 3','项目 4','项目 5','项目 6','项目 7','项目 8','项目 9','项目 10']}})

.row {填充:10px；}跨度 {背景:RGBA(255,0,0,.3)；}跨度:第n个孩子(奇数){背景:RGBA(0,255,0,.3)；}

<script src="https://vuejs.org/js/vue.min.js"></script><div id="演示"><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>

For a design a need a "table" style, every 2 Item I need a row. It's working great in the front side. However my v-model is based on the index (item_index) of Item and my code doesn't give me the expected 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>

As you can see for my v-model I get 0;1;0;1;0;1 etc.

And I would like 0;1;2;3;4;5 etc.

How can I retrieve the real Index?

解决方案

In fact, you're getting correct index for sliced array, not for original one. When you call slice on your source array in v-for, item_index is calculated for 2-element-piece of your array and that's why there's only 0,1,0,1, etc.

You have to calculate that index based on indexes from both v-for loops.
That would be (i-1)*2 + item_index in this case.

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>

这篇关于V-for 每 2 个项目添加一行给我错误的索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！