Javascript vue.js为每个第6个循环元素插入块_Javascript_Loops_Vue.js_Vue Component

Javascript vue.js为每个第6个循环元素插入块

javascript loops vue.js

Javascript vue.js为每个第6个循环元素插入块,javascript,loops,vue.js,vue-component,Javascript,Loops,Vue.js,Vue Component,我已经通过循环提供了卡片列表渲染。每3个col（引导）元素我就添加行div。现在我需要为每6个元素添加另一个col元素（banner块）。对于渲染类似的内容：我如何实现这一点我的代码现在 <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.

我已经通过循环提供了卡片列表渲染。每3个col（引导）元素我就添加行div。现在我需要为每6个元素添加另一个col元素（banner块）。对于渲染类似的内容：

我如何实现这一点

我的代码现在

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


{{offer.name}
{{offer.desc}}

这应该完全符合您的要求。。我不得不操纵数据，因为Vue的模板语言不是为处理这种用例的逻辑而设计的

HTML

我假设您希望每6个元素添加一个横幅，但您希望显示第6个元素。我会在我的数据对象上处理这个问题，在其中插入横幅。这更容易。您可以用这种方法拆分阵列

let firstPart = myData.slice(0,5)
let lastPart = myData.slice(5,)

let newData = [...firstPart, banner, ...lastPart]

现在，您只需要每6个元素执行一次。对于循环：

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

我建议您在视图中少编程，在视图模型中多编程。创建一个

computed

，将您的数据拆分为一系列优惠和横幅，也可以拆分为行，然后以简单的方式使用该计算结果

const chunk=（arr，size）=>
啊
.reduce（（acc，i）=>
（1%尺寸）？
行政协调会：
[…acc，arr.slice（i，i+大小）]，[]）；
新Vue({
el:“#应用程序”，
数据：{
优惠：[]
},
计算：{
行（）{
const with banner=chunk（this.offers，5）.map（（arr）=>[…arr，{name:'banner'，type:'banner'}]）.reduce（（a，b）=>a.concat（b），[]）；
返回块（带横幅，3）；
}
},
安装的（）{
设置超时（（）=>{
此项服务提供=[{
名称：“报价”
},
{
名称：“报价”
},
{
名称：“报价”
},
{
名称：“报价”
},
{
名称：“报价”
},
{
名称：“报价”
},
{
名称：“报价”
},
{
名称：“报价”
},
{
名称：“报价”
},
{
名称：“报价”
},
{
名称：“报价”
}
];
}, 500);
}
});
#应用程序{
显示：网格；
}
.行{
显示：网格；
网格间距：2rem；
网格模板列：重复（3，自动）；
对正内容：左；
}
.盒子{
宽度：8雷姆；
高度：8雷姆；
}
.横幅{
背景色：#f9c；
}
.报盘{
背景色：#99f；
}

{{item.name}
{{item.name}
如果可能，我建议使用flex。
因此，代码如下所示：
感谢大家，我采取了罗伊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>


横幅
提供
常量块=（arr，size）=>
啊
.reduce（（acc，i）=>
（1%尺寸）？
行政协调会：
[…acc，arr.slice（i，i+大小）]，[]）；
从“axios”导入axios
导出默认值{
数据（）{
返回{
showOffers：没错，
借贷者：[]，
isVisible:false，
loadMore：是的，
偏移量：0，
行：“”
}
},
方法：{
GetOfferList:函数（）{
让dataElements=this
dataElements.loading=true
get（'/api/v1/getUserOffers'）
.然后（功能（响应）{
dataElements.loanOffers=response.data
const with banner=chunk（dataElements.loanOffers，5）.map（（arr）=>[…arr，{name:'banner'，type:'banner'}]）.reduce（（a，b）=>a.concat（b））；
dataElements.rows=块（带横幅，3）；
})
},
},
beforeMount（）{
this.getOfferList（）
}
}
我提议使用模板并在其上循环。
然后在内部检查v-if=“i%6”->您的文章v-else-->your ad。如果他这样做，第6行将消失，但是对于每个3d行的行div驱动呢？很抱歉，第6个元素将替换为横幅。这就是他想要的吗？@RaphaelParreira我更改了它，这样就不会发生这种情况，但我正在努力找出每行3个问题（我想我已经解决了：）但我通过axiosIt从服务器获得了报价，无论从何处获得。分配优惠时，计算的结果将是正确的。我已经更新了代码段，以便在程序启动后分配优惠。还有一个问题，banner没有替换（在查询中）第6个优惠，此优惠在新行中下拉，我得到了7列，而不是6列。加上横幅附加到最后，无论列表中有多少报价，这些都是您可以在计算机中处理的事情。让它生成您想要使用的数据。这非常简单，请提供一个代码示例
    <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>

.mycol:nth-child(3n+1){
 clear:left;
}

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;
    },
  },
});

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