时间戳

首页 > 解决方案 > vue.js - 如何将对象数组拆分为多个 div 列

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

问题描述

这是我的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 的微框架中，可以这样做：

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

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

标签： javascriptarraysvue.jsvuejs2

解决方案

我会使用计算属性将它们分块。如果你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>

推荐阅读