容器中包裹不同尺寸的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 的块，以便在包装列 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>

Answer 2

一种解决方案是使用嵌套数组和 v-for 循环。

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