使用v-for在一列显示偶数索引，在另一列显示奇数索引

Question

我想显示我的数组myArray:的偶数索引

myArray: [{'label': 'hasan', 'value': 'hosein'},
{'label': '1', 'value': '2'},
{'label': 'gholi', 'value': 'gholam'},
{'label': '3', 'value': '4'},
{'label': 'an', 'value': 'goh'},
{'label': '5', 'value': '6'},
{'label': 'pashm', 'value': 'khar'},
{'label': '7', 'value': '8'}]

在右列和左列的奇数索引中使用v-for。

这是我的HTML代码：

<div class="row" v-for="objData in myArray" :key="objData.label">
// right column
<div class="line col-2"></div>
<div class="line col-3 "></div>
// left column
<div class="line col-2"></div>
<div class="line col-3 "></div>
</div>

我试图将奇数和偶数索引分离成两个新的数组，并在<div class="row>之上添加一个<div>和一个新的v-for，以在我的单独<div>中循环通过这两个数组，但它扰乱了我的数组元素。那么，如何在右侧列显示myArray的偶数索引，在左侧列显示奇数索引呢？

Answer 1

剧透：我更喜欢最后一个

您可以将此技巧用于i和v-if:

new Vue({
el: '#app',
data() {
return {
myArray: [{label:"hasan",value:"hosein"},{label:"1",value:"2"},{label:"gholi",value:"gholam"},{label:"3",value:"4"},{label:"an",value:"goh"},{label:"5",value:"6"},{label:"pashm",value:"khar"},{label:"7",value:"8"}]
};
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap-grid.min.css" />
<div id="app" class="container">
<div class="row">
<div class="col-sm">
<template v-for="(objData, i) in myArray" :key="objData.label">
<div v-if="i%2">{{objData.label}}</div>
</template>
</div>
<div class="col-sm">
<template v-for="(objData, i) in myArray" :key="objData.label">
<div v-if="!(i%2)">{{objData.label}}</div>
</template>
</div>
</div>
</div>

或者在computed道具中将数组一分为二，使用reduce:

new Vue({
el: '#app',
data() {
return {
myArray: [{label:"hasan",value:"hosein"},{label:"1",value:"2"},{label:"gholi",value:"gholam"},{label:"3",value:"4"},{label:"an",value:"goh"},{label:"5",value:"6"},{label:"pashm",value:"khar"},{label:"7",value:"8"}]
};
},
computed: {
splitArray() {
const [ evens, odds ] = this.myArray.reduce((res, item, i) => {
res[i % 2].push(item);
return res;
}, [[], []]);
return { evens, odds };
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap-grid.min.css" />
<div id="app" class="container">
<div class="row">
<div class="col-sm">
<div v-for="objData in splitArray.odds" :key="objData.label">
{{objData.label}}
</div>
</div>
<div class="col-sm">
<div v-for="objData in splitArray.evens" :key="objData.label">
{{objData.label}}
</div>
</div>
</div>
</div>

如果你想走得更远，不必在模板中重复自己：

new Vue({
el: '#app',
data() {
return {
myArray: [{label:"hasan",value:"hosein"},{label:"1",value:"2"},{label:"gholi",value:"gholam"},{label:"3",value:"4"},{label:"an",value:"goh"},{label:"5",value:"6"},{label:"pashm",value:"khar"},{label:"7",value:"8"}]
};
},
computed: {
splitArray() {
return this.myArray.reduce((res, item, i) => {
res[1 - i % 2].push(item);
return res;
}, [[], []]);
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap-grid.min.css" />
<div id="app" class="container">
<div class="row">
<div v-for="(col, i) in splitArray" :key="`col-${i}`" class="col-sm">
<div v-for="objData in splitArray[i]" :key="objData.label">
{{objData.label}}
</div>
</div>
</div>
</div>

Answer 2

你应该让你的数据像这个

var myArray = [
{ 
left: {'label': 'hasan', 'value': 'hosein'},
right: {'label': '1', 'value': '2'}
}...
];

或

使用不带div.row的display:grid

<div v-for="(objData, index) in myArray" :key="objData.label" :class="['line', {col-2: index%2 === 1, col-3: index%2 === 0}"></div>

Answer 3

这个怎么样？设法将数组分为两列，但使用了两个v-for，也许您不会喜欢这样。与其他提出的解决方案相比，它使用的javascript更少，但需要权衡更复杂的HTML。

HTML:

<div class="row">
<!-- Odd column -->
<div style="border: 1px solid red;">
<div v-for="(value, index) in myArray">
<div v-if="index % 2 != 0">{{ value }}</div>
</div>
</div>
<!-- Even column -->
<div style="border: 1px solid blue;">
<div v-for="(value, index) in myArray">
<div v-if="index % 2 == 0">{{ value }}</div>
</div>
</div>
</div>