Fórum Gerar quebras de linha no VueJS #599686
11/01/2019
0
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.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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.
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
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.
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
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)