Колонки vue prop с разными размерами, завернутые в контейнер

В настоящее время я работаю над страницей для нового сайта нашей компании. В этом дизайне у нас есть страница блога, которая отображает наши записи в блоге. Я запрашиваю эти блоги с Cockpit CMS & axios в моем проекте NuxtJs, который делает его объектом.

На данный момент я борюсь со следующим: В дизайне блоги отображаются в виде строк по 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/

На данный момент у меня есть компонент, который получает мои блоги с помощью "блогов". Я и мой коллега не можем найти хороший рабочий метод, чтобы разбить массив блогов на куски 2 и 3, чтобы правильно отобразить их в div столбцов переноса.

Кто-нибудь здесь может помочь нам? Любая дополнительная информация, которая нужна, приветствуется.

Источник

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>

Источник

Одним из решений является использование вложенных массивов и циклов 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/

Источник
Другие вопросы по тегам