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 }} •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>