如何使用 Vue 实现这一点？

Posted 2023-02-23

【中文标题】如何使用 Vue 实现这一点？

【英文标题】：How can I implement this using Vue?

【发布时间】：2017-08-30 22:05:52

【问题描述】：

我正在将我的代码迁移到 Vue.js，这对 Vue 来说非常新。正如你看到的截图（下面的链接），在 div 中有 4 列 columns 类名。我正在尝试使用索引，例如v-if='index % 4 === 0'，但我无法访问v-for 循环之外的索引。

这就是我想要做的。 https://i.stack.imgur.com/aO2Rx.png

<template lang="pug">
.container
  .columns // add this after every 4 coulmns
    .column.is-3.vid(v-for='(item,index) in items')
      .panel
        p.is-marginless
         a(:href='item.videoId')
           img(:src='item.thumbnail')
        .panel.vidInfo
          .columns.hax-text-centered
            .column
              .panel-item.reddit-ups
                span  item.score 
                i.fa.fa-reddit-alien.fa-2x
              .panel-item.reddit-date
                i.fa.fa-calendar.fa-2x
</template>

【问题讨论】：

为什么要在 v-for 之外渲染与 v-for 中的项目相关的东西？

@Potray 你认为还有其他方法可以做到这一点吗？请检查此i.stack.imgur.com/aO2Rx.png 并告诉我！

不是不知道“items”的内容

您可以创建一个包含 4 项块的新数组，例如使用 lodash chunk。然后迭代两次。

@wostex 哦，我在 lodash 中寻找一些模块！非常感谢

【参考方案1】：

您可以先将项目分成适当大小的组。 例如，假设 items 是一个数字数组 `

var items = [1,2,3,4,5,6,7,8,9,10]
groupsLen = Math.ceil(items.length / 4)
var groups = [];
for(var i = 0; i < groupsLen; i++)
    var start = i * 4;
    var end = start + 4;
    groups.push(items.slice(start, end))

` 然后您的模板将如下所示（将每个项目作为一个对象）

`

<template lang="pug">
.container
  .columns(v-for="group in groups") // add this after every 4 coulmns
    .column.is-3.vid(v-for='(item) in group')
      .panel
        p.is-marginless
         a(:href='item.videoId')
           img(:src='item.thumbnail')
        .panel.vidInfo
          .columns.hax-text-centered
            .column
              .panel-item.reddit-ups
                span  item.score 
                i.fa.fa-reddit-alien.fa-2x
              .panel-item.reddit-date
                i.fa.fa-calendar.fa-2x
</template>`