Série da semana: eXtreme Programming na prática

Veja mais

Gerar quebras de linha no VueJS

11/01/2019

12

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>

Melhor post

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

Outros Posts

12/01/2019

João Santos

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.

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