vue prop display columns with different sizes wrapped in container

Question

I'm currently working on a page for our company's new website. In this design we have a blog page which displays our blog entries. I request these blogs with Cockpit CMS & axios in my NuxtJs project that makes it a object.

At this moment I'm struggling with the following: In the design the blogs are displayed in rows of 3 items, and after that 2 items. I'm using the BULMA framework and to display my columns the correct way I need to wrap the columns like follow:

<div class="columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="columns">
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

A short version of my code can be found here: https://jsfiddle.net/06o5nvkd/

At this moment I have a component which gets my blogs through a prop called 'blogs'. Me and my colleague can't find a good working method to split the blogs array into chunks of 2 & 3 to display them correctly in a wrapping columns div.

Is anyone here able to help us out? Any more information that's needed is welcome.

Answer 1

Use a computed property to chunk your blogs array on the fly and use that array with the chunks to create the columns.

Computed properties detect addtions to the blogs array automatically (when using this.blogs inside), so fetching some new blog entries will be no problem.

new Vue({
  el: "#app",
  data: {
    blogs: [
      { title: "Learn JavaScript" },
      { title: "Learn Vue" },
      { title: "Play around in JSFiddle" },
      { title: "Build something awesome" },
      { title: "a" },
      { title: "b" },
      { title: "c" },
      { title: "d" },
      { title: "e" },
      { title: "f" },
    ]
  },
  computed: {
    blogsChunked() {
      let blogs = this.blogs;
      let chunkSize = 2;
      let blogsChunked = [];
      while (blogs.length > 0) {
        let chunk = blogs.slice(0, chunkSize);
        blogs = blogs.slice(chunkSize);
        blogsChunked.push(chunk);
        chunkSize == 2 ? chunkSize++ : chunkSize--;
      }
      return blogsChunked;
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

div.column {
  color: white;
  background-color: grey;
  margin: 5px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <section class="blogs has-padding-bottom-xxl">
    <div class="container">
      <div class="columns is-mobile" v-for="(chunk, index) in blogsChunked" :key="index">
        <div class="column" v-for="(blog, key) in chunk" :key="key">
          {{ blog.title }}
        </div>
      </div>
    </div>
  </section>
</div>