Fórum Gerar quebras de linha no VueJS #599686

11/01/2019

Prezados,

Preciso fazer que o resultado de uma busca no VueJS, gere quebras de linhas.
Quero que a cada 3 colunas seja criado uma nova linha. como é feito em e-commerce.
Eu sei a logica para fazer em PHP, mas no VueJS não estou conseguindo.

Se alguém puder me dar uma luz agradeço.

<template>
    <div class="row">
        <div class="card bg-primary-gradient collapsed-card" v-for="(item, index) in items" :key="index.id">
              <div class="card-header">
                <h3 class="card-title">{{item.title}}</h3>
 
                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                  </button>
                </div>
                <!-- /.card-tools -->
              </div>
              <!-- /.card-header -->
              <div class="card-body" style="display: none;">
                {{item.price}}
              </div>
              <!-- /.card-body -->
        </div>
    </div>
</template>

João Santos

Curtir tópico

+ 3

Responder

Post mais votado

11/01/2019

Olá, tudo bem?
Parece que você está usando o Bootstrap, certo? Se sim, experimente usar o sistema de grid que ele oferece para gerar as colunas.
Por exemplo, se todas os itens ficarem em uma div com classe col-4 (ou col-md-4, col-lg-4, etc), a cada 3 elas quebrarão a linha.
Fiz um exemplo aqui: https://jsfiddle.net/tkdg4q72/
Abraço.

Joel Rodrigues

Responder

Gostei + 2

Mais Posts

12/01/2019

João Santos

Entendi, então não preciso necessariamente abrir uma nova row, o bootstrap quebra automaticamente quando somado as colunas.

Responder

Gostei + 0