vue.js - 如何将对象数组拆分为多个 div 列

Posted 2023-02-22

【中文标题】vue.js - 如何将对象数组拆分为多个 div 列

【英文标题】：vue.js - How to split array of objects into multiple div columns

【发布时间】：2018-10-06 20:47:46

【问题描述】：

这是我的 vue 布局：

<template lang="pug">
  .row
    .col-4(v-for="article in articles") // need to render 1-3 items here
      |  article.name 
  .row
    .col-4(v-for="article in articles") // need to render 4-6 items here
      |  article.name 
</template>

<script>
export default 
  name: 'Articles',
  data() 
    return 
      articles: [
         name: 'Article 1' ,
         name: 'Article 2' ,
         name: 'Article 3' ,
         name: 'Article 4' ,
         name: 'Article 5' ,
         name: 'Article 6' ,
      ]
    
  ,

</script>

目标是：

<div class="row">
  <div class="col-4">article[0].name</div>
  <div class="col-4">article[1].name</div>
  <div class="col-4">article[2].name</div>
</div>

<div class="row">
  <div class="col-4">article[3].name</div>
  <div class="col-4">article[4].name</div>
  <div class="col-4">article[5].name</div>
</div>

在 Flask 和 Jinja 等基于 Python 的 Micro Framework 中，可以这样做：

% for article_row in articles | batch(3, ' ') %
  <div class="row">
    % for article in article_row %
    <div class="span4"> article </div>
    % endfor %
  </div>
% endfor %

那么，有没有办法在 vue.js 中像上面那样做？

【问题讨论】：

您可以在 javascript 中复制 batch 行为。只需有一个计算值，将一维数组转换为二维数组（参见***.com/a/22464838 示例），然后有 2 个v-for 循环

【参考方案1】：

v-for="(article,i) in articles" 和 v-if="i>=0 && i<3" 的组合

【参考方案2】：

我会使用辅助组数组来按行呈现文章组：

<template lang="pug">
  .container
    .row(v-for="(group, i) in articleGroups")
      .col-4(v-for="article in articles.slice(i * itemsPerRow, (i + 1) * itemsPerRow)")
        |  article.name 
</template>

<script>
export default 
  name: 'Articles',
  data() 
    return 
      itemsPerRow: 3,
      articles: [
         name: 'Article 1' ,
         name: 'Article 2' ,
         name: 'Article 3' ,
         name: 'Article 4' ,
         name: 'Article 5' ,
         name: 'Article 6' ,
      ]
    
  ,
  computed: 
    articleGroups () 
      return Array.from(Array(Math.ceil(this.articles.length / this.itemsPerRow)).keys())
    
  ,

</script>

演示： https://codesandbox.io/s/rj60o8l5p

【讨论】：

我分叉了你的项目，所以它不依赖于数组处理或使用v-for with a range进行切片：codesandbox.io/s/4086n4o5j9

添加了另一个沙盒示例，其中包含 (vue/require-v-for-key) 要求和多次使用的活动文章的辅助方法。有没有更好的办法？ codesandbox.io/s/vue-template-yy169?file=/src/components/…

【参考方案3】：

我会使用计算属性将它们分块。如果您有 lodash 可用，您可以这样做：

computed: 
  chunked () 
    return _.chunk(this.articles, 3)
  ,
,

如果你周围没有 lodash，你可以在各处找到分块的逻辑。

function chunk (arr, len) 

  const chunks = []
  const i = 0
  const n = arr.length

  while (i < n) 
    chunks.push(arr.slice(i, i += len))
  

  return chunks

那么，你可以这样做：

<div class="row" v-for="chunk in chunked">
  <div class="col-4" v-for="article in chunk">
     article.name 
  </div>
</div>

【参考方案4】：

使用 .reduce 可以将数组分成 X 组。

<template>
    <div class="container">
        <template v-for="group in groupedArticles">
            <div class="row">
                <span v-for="article in group">
                     article.title 
                </span>
            </div>
        </template>
    </div>
</template>

<script>
    export default 
        data: function() 
            return 
                articles: [
                     id: 1, title: 'Hello People' ,
                     id: 2, title: 'What Time is it?' ,
                     id: 3, title: 'Dogs & Cats' 
                ],
                itemsPerRow: 2
            
        ,
        computed: 
            groupedArticles: function() 
                return this.articles.reduce((accumulator, article, index) => 
                    if (index % this.itemsPerRow == 0) 
                        accumulator.push([article]);
                     else 
                        accumulator[accumulator.length - 1].push(article);
                     

                    return accumulator;
                , []);
            
        ,
    
</script>

【参考方案5】：

在代码中使用 lodash.chunk() 函数的更简单方法是：

<template lang="pug">
  .row(v-for="column in articles")
    .col-4(v-for="article in column") 
      |  article.name 
</template>

<script>
import lodash from "lodash"

export default 
  name: 'Articles',
  data() 
    return 
      articles: lodash.chunk([
         name: 'Article 1' ,
         name: 'Article 2' ,
         name: 'Article 3' ,
         name: 'Article 4' ,
         name: 'Article 5' ,
         name: 'Article 6' ,
      ], 3),
    
  ,

</script>

lodash.chunk()函数的详细解释参考这里：https://dustinpfister.github.io/2017/09/13/lodash-chunk/