javascript - vue prop 显示包裹在容器中的不同尺寸的列

Question

我目前正在为我们公司的新网站制作一个页面。在此设计中，我们有一个博客页面，用于显示我们的博客条目。我在我的 NuxtJs 项目中使用 Cockpit CMS 和 axios 请求这些博客，使其成为一个对象。

此时此刻，我正在努力解决以下问题:在设计中，博客以 3 个项目的行显示，然后是 2 个项目。我正在使用 BULMA 框架，并以我需要的正确方式显示我的列，如下所示:

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

我的代码的简短版本可以在这里找到: https://jsfiddle.net/06o5nvkd/

此时我有一个组件可以通过名为“blogs”的属性获取我的博客。我和我的同事找不到一个好的工作方法来将博客数组拆分为 2 和 3 block ，以便在包装列 div 中正确显示它们。

这里有人可以帮助我们吗？欢迎提供任何需要的更多信息。

Answer 1

使用计算属性动态对 blogs 数组进行分块，并使用该数组和分块来创建列。

计算属性会自动检测对 blogs 数组的添加(在内部使用 this.blogs 时)，因此获取一些新的博客条目不会有问题。

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>