Bootstrap行类使用vue模板每三个元素

Question

<template id="players-template">
<div class="col-md-4" v-for="player in players">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a href="#">{{ player.username }}</a>
                <span class="small pull-right">{{ player.createdAt }}</span>
            </h3>
        </div>

        <div class="panel-body">
            <img alt="" class="img-circle center-block">
        </div>
        <div class="panel-footer">
            <div class="btn-group btn-group-justified" role="group" aria-label="...">
                <a href="#" class="btn btn-primary btn-success send-message" data-toggle="tooltip" data-placement="bottom" title="Wy?lij wiadomo??" id="{{ player.username }}"><span class="glyphicon glyphicon-envelope"></span>&nbsp;</a>
                <a href="#" class="btn btn-primary btn-info" data-toggle="tooltip" data-placement="bottom" title="Poka? profil"><span class="glyphicon glyphicon-user"></span>&nbsp;</a>
                <a href="#" class="btn btn-primary btn-primary" data-toggle="tooltip" data-placement="bottom" title="Zobacz szczegó?owe informacje o po?cie"><span class="glyphicon glyphicon-option-horizontal"></span>&nbsp;</a>
            </div>
        </div>
    </div>
</div>

我创建了用于在我的网站上显示玩家的模板。我不知道如何<div class="row">每隔三个面板添加一次。

Answer 1

这是一个可能有用的简化示例。

这将使用自定义过滤器将玩家分成3个组。外部循环遍历每个块并创建行，内部循环遍历每个玩家并创建列。

HTML

<div id="app" class="container">
  <div v-for="row in players | chunk 3" class="row">
    <div v-for="player in row" class="col-sm-4">
      {{ player.name }}
    </div>
  </div>
</div>

Java脚本

Vue.filter('chunk', function (value, size) {
  return _.chunk(value, size); // using lodash
})

new Vue({
    el: '#app',
    data: {
        message: 'Players',
        players: [
          { name : "Player 1"},
          { name : "Player 2"},
          { name : "Player 3"},
          { name : "Player 4"},
          { name : "Player 5"},
          { name : "Player 6"},
          { name : "Player 7"},
          { name : "Player 8"}
        ]
    }
})

全提琴