title: Split an array and display in rows and columns?
body: <p>Hopefully this makes sense.  I'll change things as requested if I'm missing something crucial.</p>
  
  <p>I have a component where the items of my array are displayed here within cards.</p>
  
  <pre><code>  &lt;b-card-group deck class="mb-3"&gt;
      &lt;b-card border-variant="danger" bg-variant="dark" text-variant="white" class="text-center" v-for="b in breakdownNumbers" :key="b"&gt; {{b}}
      &lt;/b-card&gt;
    &lt;/b-card-group&gt;
  </code></pre>
  
  <p>That array is on another component here</p>
  
  <pre><code>  data() {
      return {
        bns: []
      }
    }
    methods: {
      addBns (bns) {
          for (var b of bns) {
            if(this.bns.indexOf(b) === -1) {
              this.bns.push(b)
            }
          }
        },
  </code></pre>
  
  <p>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 <code>breakdownNumbers</code> there are causing the cards to just keep shrinking.</p>
  
  <p>Is there a simple way to do this?</p>
  
  <p>This is how it looks now with 5 items added.  So when someone clicks <code>New Breakdown</code> I want it to start on the next row below the 5 already added to the array <code>bns:[]</code></p>
  
  <p><a href="https://i.stack.imgur.com/IoEOn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IoEOn.jpg" alt="enter image description here"></a></p>
  
  <p>Ok so now I have:</p>
  
  <pre><code>  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)
        },
  </code></pre>
  
  <p>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</p>
  
  <pre><code>&lt;build-breakdown-select :buildNumber="buildNumber" :breakdownNumbers="bns" @breakdowns="addBns"/&gt;
  </code></pre>
  
  <p>And then <code>&lt;build-breakdown-select&gt;</code> houses the cards.</p>