vuejs循环遍历项目，每3个项目新行答案

【问题标题】：vuejs loop through items, every 3 items new rowvuejs循环遍历项目，每3个项目新行
【发布时间】：2020-10-30 16:59:00
【问题描述】：

目前我有这段代码，每行显示 3 个项目。

<b-container class="tags">
<b-row v-for="index in 3" :key="index">
   <b-col>
      <MovieItem />
   </b-col>
   <b-col>
      <MovieItem />
   </b-col>
   <b-col>
      <MovieItem />
   </b-col>
</b-row>
</b-container>

现在我从 api 返回了结果，我想要与上面相同的格式。我知道如何循环遍历结果，但是如何在b-col 和b-row 中添加包装代码，使其格式与上述相同？

<b-container class="tags">
    <MovieItem  v-for="(movie,index) in MovieItems" :key="index" />
</b-container>

我该如何解决？

【问题讨论】：

标签： vue.js

【解决方案1】：

根据MovieItems的长度，可以用Math.floor((MovieItems.length - 1) / 3) + 1计算出需要多少行：

computed: {
  nrows() {
    return Math.floor((MovieItems.length - 1) / 3) + 1;
  }
}

在您的模板中，使用嵌套循环，假设 MovieItem 组件将 movie 作为道具：

<b-row v-for="row in nrows" :key="row">
   <b-col v-for="col in 3" :key="col">
      <MovieItem :movie="MovieItems[row * 3 + col] v-if="row * 3 + col < MovieItems.length" />
   </b-col>
</b-row>

【讨论】：

“MovieItems[row * 3 + col]”不正确，我认为应该是“MovieItems[col + 3 * (row - 1) - 1]”，而您缺少一个v-if 前的双引号。