拆分数组并按行和列显示？

Question

希望这是有道理的。如果我错过了一些至关重要的东西，我会按照要求改变一些事情。

我有一个组件，其中我的数组项目显示在卡片中。

  <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>

该数组在此处的另一个组件

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

所以这是我的问题。当然，如果添加了30个项目，那么我的表单中将显示30个卡片。我需要做什么，不知道从哪里开始，每行只显示5张卡，而不是继续将卡添加到同一行，但是很多breakdownNumbers导致卡片一直在缩小。< / p>

有一种简单的方法吗？

这就是现在添加5个项目的方式。因此，当有人点击New Breakdown时，我希望它从已经添加到数组{5}中的5下面的下一行开始

好的，现在我有：

bns:[]

我可以在控制台中看到分割。我不知道该怎么做。我仍然将数组发送到显示组件

  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)
      },

然后<build-breakdown-select :buildNumber="buildNumber" :breakdownNumbers="bns" @breakdowns="addBns"/> 收到卡片。

Answer 1

我认为这可能是最简单的选择之一。首先，从lodash附加块模块。真的很小：

when(httpClient.execute(any())).thenReturn(JSON object);

现在，将数组拆分为数组块。例如：

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

此操作的结果是以这种形式的数组：

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

完成。您现在可以将它与v-for指令一起使用，使用第二个嵌套的v-for指令。例如：

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