[Vuejs]-Is responsive masonry with VueJS and Bootstrap Tabs even possible?

by

0👍

✅

I eventually solved this by switching to two fixed Bootstrap columns, which meant that I could fill each column with exactly half of the elements. Since the columns weren’t stacked on top of each other, everything fit in nicely.

Here’s an example for how to split an Array of elements to display into two:

splitItems: function(itemCategory) {
  let itemArray = Object.keys(this.items[itemCategory])
  let split = [[], []]
  let alternator = 0
  itemArray.forEach(item => {
    if (this.items[itemCategory][item] !== false) {
      split[alternator].push(item)
      alternator = Math.abs(alternator - 1)
    }
  })
  return split
}

Then you just run nested v-for to render each column separately.

👤LiRa

Leave a comment