0

Hopefully this makes sense. I'll change things as requested if I'm missing something crucial.

I have a component where the items of my array are displayed here within cards.

  <b-card-group deck class="mb-3">
    <b-card border-variant="danger" bg-variant="dark" text-variant="white" class="text-center" v-for="b in breakdownNumbers" :key="b"> {{b}}
    </b-card>
  </b-card-group>

That array is on another component here

  data() {
    return {
      bns: []
    }
  }
  methods: {
    addBns (bns) {
        for (var b of bns) {
          if(this.bns.indexOf(b) === -1) {
            this.bns.push(b)
          }
        }
      },

So here's my issue. Of course if there are 30 items added then 30 cards will be displayed across my form. What I need to do and don't know where to start is have only 5 cards displayed per row rather than continue to add cards to the same row for however many breakdownNumbers there are causing the cards to just keep shrinking.

Is there a simple way to do this?

This is how it looks now with 5 items added. So when someone clicks New Breakdown I want it to start on the next row below the 5 already added to the array bns:[]

enter image description here

Ok so now I have:

  methods: {
    addBns (bns) {
        for (var b of bns) {
          if(this.bns.indexOf(b) === -1) {
            this.bns.push(b)
          }
        }
        var bns = _.chunk(bns,3)
        console.log(bns)
      },

I can see the split in the console. I'm not sure what to do from here. I still have the array being sent to the display component

<build-breakdown-select :buildNumber="buildNumber" :breakdownNumbers="bns" @breakdowns="addBns"/>

And then <build-breakdown-select> houses the cards.

Lee
  • 133
  • 11
  • [You could use flexbox to achieve this](https://stackoverflow.com/questions/29546550/how-to-force-a-flex-box-to-display-4-items-per-row) – Andy Nov 21 '17 at 17:32
  • Unfortunately flexbox is not an option. Someone mentioned doing a list of a list and kind of trailed off from there. – Lee Nov 21 '17 at 17:39
  • Use bulma or bootstrap to display a grid (columns and rows) and then fill them with items accordingly – klimat Nov 21 '17 at 17:58

1 Answers1

0

I think this can be one of the simpliest options. First, append the chunk module from lodash. Is really small:

<script src="https://unpkg.com/lodash@4.17.4/chunk.js"></script>

Now, split your array to array of chunks. For example:

var items = ['a', 'b', 'c', 'd', 'e', 'f']
var items = _.chunk(items, 3)

As result of this operation is array in this form:

var items = [['a', 'b', 'c'], ['d', 'e', 'f']]

Done. You can now use it with v-for directive, with second, nested v-for directive. For example:

<row v-for="row, ridx in items" :key="ridx">
  <cell v-for="cell, cidx in row" :key="cidx"></cell>
</row>
  • This is all being done locally using nuxt. I don't think I have the option to include this. – Lee Nov 21 '17 at 18:08
  • @Lee You have this option in Nuxt also. Just use / import lodash from npm. –  Nov 21 '17 at 18:10
  • Sorry your right, I had to check with someone here who is overseeing some project things to make sure and it turns out its already there so I just needed to import `lodash` on my component. I'm new to JavaScript so now I just have to figure out how to use it to accomplish what I'm wanting to do. – Lee Nov 21 '17 at 18:43
  • I am sorry, but... You are too hurry. Nuxt is JavaScript framework. So you should learn JS first. Otherwise you are not asking for help, but for the solution. And nobody will write an application for you... My last advice is ... learn JS first. –  Nov 21 '17 at 19:23
  • I wish I had that option. This isn't school, its not for fun. The person who did it is no longer here and I have to get it done. I've written 60% of this through google, reading, trial and error and further sleepless nights. I'm not a JavaScript dev and have no interest in becoming one but again, unfortunately I have to learn how to get this done. I'll keep searching. Thank you for what you've included though. I appreciate it. – Lee Nov 21 '17 at 19:29
  • Go hire a freelancer. It will be faster and smarter solution. And in the end, maybe cheapier also. –  Nov 21 '17 at 20:09