vuejs v-for 每 5 个项目添加引导行

Question

我有一系列项目，例如“项目 1”、“项目 2”到“项目 25”。我希望呈现后的 HTML 如下所示：

 <div class="row">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
   <div>Item 4</div>
   <div>Item 5</div>
</div>
<div class="row">
   <div>Item 6</div>
   <div>Item 7</div>
   <div>Item 8</div>
   <div>Item 9</div>
   <div>Item 10</div>
</div>

在 vue.js 中表达这个的正确方法是什么？

  <div class="row">
    <span  v-for="(item, index) in items">
         // do something like this in vue.js style:
         // if (item % 5 == 0) print "</div><div class='row'>"
         <app-field >{{ item }}</app-field>
    </span>
</div>

原文由 herrjeh42 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

或者您可以使用 lodash _.chunk() 做同样的事情，我个人觉得它更具可读性。

模板：

 <div class="columns" v-for="chunk in productChunks">

    <div class="column is-one-quarter" v-for="product in chunk">
       // stuff
    </div>

</div>

然后

    computed: {
      productChunks(){
          return _.chunk(Object.values(this.products), 4);
      }
    },

就我个人而言，我经常在 main.js 中全局导入 lodash：

 import _ from 'lodash'

记住“ npm install --save lodash ”

原文由 Joel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以试试这个：

   <div class="row" v-for="i in Math.ceil(items.length / 5)">
    <span v-for="item in items.slice((i - 1) * 5, i * 5)">
      {{item}}
    </span>
  </div>

看一个工作示例：

 new Vue({
  el: '#demo',
  data: {
    items: [
      'item 1',
      'item 2',
      'item 3',
      'item 4',
      'item 5',
      'item 6',
      'item 7',
      'item 8',
      'item 9',
      'item 10',
      'item 11',
      'item 12',
      'item 13',
      'item 14',
      'item 15',
      'item 16',
      'item 17',
      'item 18',
      'item 19',
      'item 20',
      'item 21',
      'item 22',
      'item 23',
      'item 24',
      'item 25'
    ]
  }
})

 .row {
  border: solid 1px #404040;
  padding: 10px;
}

 <script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <div class="row" v-for="i in Math.ceil(items.length / 5)">
    <span v-for="item in items.slice((i - 1) * 5, i * 5)">
  {{item}}
</span>
  </div>
</div>

原文由 CD.. 发布，翻译遵循 CC BY-SA 3.0 许可协议