Gerar quebras de linha no VueJS
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.
<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
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
Clique aqui para fazer login e interagir na Comunidade :)