包装在容器中的不同尺寸的 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

一种解决方案是使用嵌套数组和 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/

Answer 2

使用计算的属性动态分块您的 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>

包装在容器中的不同尺寸的 vue prop 显示列

vue prop display columns with different sizes wrapped in container

javascript

vue.js

bulma

nuxt.js