Bootstrap row class each third element with vue template [duplicate]

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>

I created the template for showing players on my site. I don't know how can I add new <div class="row"> every third panel.

Answer 1

Here's a simplified example that might help.

This uses a custom filter to "chunk" the players into groups of 3. The outer loop iterates over each chunk and creates the rows and the inner loop iterates over each player and creates the columns.

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>

Javascript

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"}
        ]
    }
})

Full Fiddle