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.

Bennett Dams · Accepted Answer · 2018-11-08T15:48:38.943

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>

score 0 · Answer 2 · answered Nov 08 '18 at 14:40

0

One solution is to have nested arrays & v-for loops.

<div id="app">
  <section class="blogs has-padding-bottom-xxl">
    <div class="container">
      <div class="columns"  v-for="(blogs, key) in blogsArr" :key="key">
      <div class="column" v-for="(blog, index) in blogs" :key="index">
      {{ blog.title }}
      </div>
      </div>
    </div>
  </section>
</div>


new Vue({
  el: "#app",
  data: {
    blogsArr: [
      [{ title: "Learn JavaScript" },
      { title: "Learn Vue" }],
      [{ title: "Play around in JSFiddle" },
      { title: "Build something awesome" }]
    ]
  }
})

https://jsfiddle.net/3vqydakw/

answered Nov 08 '18 at 14:40

artoju

1,612
12
12

Problem with this is, is that I get my blog entries with axios in 1 single array with all my blog entries, I can't nest them as far as I know. – Marco Jacobs Nov 08 '18 at 14:46
You can though, like done here https://stackoverflow.com/a/8495740/6685348 just push the chunks into a new array. Maybe someone else has a better solution though. – artoju Nov 08 '18 at 14:59

vue prop display columns with different sizes wrapped in container

2 Answers2