我通过循环呈现提供卡列表。每个第 3 列（引导程序）元素我添加行 div。现在我需要为每 6 个元素添加另一个 col 元素（横幅块）。渲染类似的东西：
我该如何实现？
我现在的代码
<div class="row" v-for="i in Math.ceil(offers.length / 3)">
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12" v-for="offer in offers.slice((i-1)*3, i*3)">
<h2>{{offer.name}}</h2>
<h2>{{offer.desc}}</h2>
</div>
</div>
【问题讨论】：
标签： javascript loops vue.js vue-component
for循环：
<div class="mycol" v-for="(offer,ind) in offers">
<template v-if="ind % 5 == 0">
<h2>banner</banner>
</template>
<template v-else>
<h2>{{offer.name}}</h2>
<h2>{{offer.desc}}</h2>
</template>
</div>
对于每三个列的新行，您可以使用 css
.mycol:nth-child(3n+1){
clear:left;
}
【讨论】：
我建议您在视图中少编程，多在视图模型中编程。创建一个computed，将您的数据拆分为一系列优惠和横幅以及行，然后以直接的方式使用计算出来的数据。
const chunk = (arr, size) =>
arr
.reduce((acc, _, i) =>
(i % size) ?
acc :
[...acc, arr.slice(i, i + size)], []);
new Vue({
el: '#app',
data: {
offers: []
},
computed: {
rows() {
const withBanners = chunk(this.offers, 5).map((arr) => [...arr, {name: 'banner', type: 'Banner'}]).reduce((a, b) => a.concat(b), []);
return chunk(withBanners, 3);
}
},
mounted() {
setTimeout(() => {
this.offers = [{
name: 'offer'
},
{
name: 'offer'
},
{
name: 'offer'
},
{
name: 'offer'
},
{
name: 'offer'
},
{
name: 'offer'
},
{
name: 'offer'
},
{
name: 'offer'
},
{
name: 'offer'
},
{
name: 'offer'
},
{
name: 'offer'
}
];
}, 500);
}
});#app {
display: grid;
}
.row {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(3, auto);
justify-content: left;
}
.box {
width: 8rem;
height: 8rem;
}
.banner {
background-color: #f9c;
}
.offer {
background-color: #99f;
}<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<div class="row" v-for="row in rows">
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12" v-for="item in row">
<div v-if="item.type === 'Banner'" class="banner box">
<h2>{{item.name}}</h2>
</div>
<div v-else class="offer box">
<h2>{{item.name}}</h2>
</div>
</div>
</div>
</div>【讨论】：
这应该完全符合你的要求。我不得不对数据进行一些操作，因为 Vue 的模板语言不是为处理这种用例的逻辑而设计的
HTML
<div id="app">
<div v-for="items in rows" class="row">
<div v-for="item in items" class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">{{item}}</div>
</div>
</div>
脚本
created () {
while (this.items.length > 0) {
const howMany = (this.rows.length % 3 === 0) ? 3 : 2
const row = this.items.splice(0, howMany)
if (howMany === 2) row.push('banner')
this.rows.push(row)
}
},
【讨论】：
我假设您希望每 6 个元素添加一个横幅，但您希望显示第 6 个。我会在我的数据对象上处理这个，在其中插入横幅。这更容易。你可以用这种方式分割你的数组。
let firstPart = myData.slice(0,5)
let lastPart = myData.slice(5,)
let newData = [...firstPart, banner, ...lastPart]
现在，您只需每 6 个元素执行一次。
【讨论】：
如果可能的话，我建议使用 flex。 所以代码看起来像：http://jsfiddle.net/n89dbo37/
new Vue({
el: '#app',
data() {
return {
items: _.times(20, i => ({type: 'offer'})),
};
},
computed: {
itemsWithBanners() {
let result = [];
this.items.forEach((item, idx) => {
if (idx && idx % 5 === 0) {
result.push({type: 'banner'});
}
result.push(item);
});
return result;
},
},
});
【讨论】：
感谢大家，我采用 Roy J 解决方案，为我的案例重建并获得结果。我的代码：
<template>
<div class="section-space80 results-col" >
<div class="container" >
<div class="row">
<div class="col-md-12">
<div class="wrapper-content bg-white pinside40">
<div class="row" v-for="row in rows">
<div v-for="offer in row" class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
<div class="lender-listing" v-if="offer.type && offer.type === 'Banner'">
<div class="lender-head">
Banner
</div>
</div>
<div class="lender-listing" v-if="offer.mfoName">
<div class="lender-head">
<div class="lender-logo">Offer</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
const chunk = (arr, size) =>
arr
.reduce((acc, _, i) =>
(i % size) ?
acc :
[...acc, arr.slice(i, i + size)], []);
import axios from 'axios'
export default {
data() {
return {
showOffers: true,
loanOffers: [],
isVisible: false,
loadMore: true,
offset: 0,
rows: ''
}
},
methods: {
getOffersList: function () {
let dataElements = this
dataElements.loading = true
axios.get('/api/v1/getUserOffers')
.then(function (response) {
dataElements.loanOffers = response.data
const withBanners = chunk(dataElements.loanOffers, 5).map((arr) => [...arr, {name: 'banner', type: 'Banner'}]).reduce((a, b) => a.concat(b));
dataElements.rows = chunk(withBanners, 3);
})
},
},
beforeMount(){
this.getOffersList()
}
}
</script>
【讨论】：
我提议使用模板并循环它。 然后在里面检查 v-if="i%6" --> 你的文章 v-else --> yuor ad。
【讨论】：