vue.js - 객체 배열을 여러 개의 div 열로 분할하는 방법

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>

Plask나 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에서 위와 같은 방법을 사용할 수 있을까요?

도우미 그룹 어레이를 사용하여 기사 그룹을 열로 렌더링합니다.

<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

계산한 속성을 사용해서 그것들을 정리할 거예요.가지고 계신 경우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>

의 조합.v-for="(article,i) in articles"그리고.v-if="i>=0 && i<3"

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

코드 내에서 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.http() 함수에 대한 자세한 내용은 https://dustinpfister.github.io/2017/09/13/lodash-chunk/ 를 참조하십시오.

언급URL : https://stackoverflow.com/questions/50038129/vue-js-how-to-split-array-of-objects-into-multiple-div-columns