Boostrap col-md | Vue.js parte 2: construindo Single Page Applications

Solucionado (ver solução)

Solucionado
(ver solução)

1
resposta

por Leveditor

| 124.1k xp | 228 posts

Boa tarde, estou tentando usar o col-md com vue, estou usando v-for mas não funciona

<div class="row">
   <div v-for="img in fotos">
        <article class="col-md-3">
                <img :src="img.url" >
         </article>
    </div>
</div>

SCRIPT

data(){
    return {
         fotos: [
           {url: "foto1.jpg"},          
          {url: "foto2.jpg"},
]
     }
}

Não esta querendo alinhar lado a lado, mas desse modo aqui funciona

<div class="row">
        <article class="col-md-3">
                <img src="foto1.jpg" >
         </article>

          <article class="col-md-3">
                <img src="foto2.jpg" >
         </article>
</div>

1 resposta

solução!

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

27/02/2020

Fala ai Leveditor, tudo bem? O problema esta no seu v-for, vamos ver o seu código:

<div class="row">
   <div v-for="img in fotos">
        <article class="col-md-3">
                <img :src="img.url" >
         </article>
    </div>
</div>

Repare que você tem uma div com a classe row, dentro dela, para cada img no array de fotos você vai criar uma nova div sem classe e dentro de cada div um article com a definição das colunas.

No caso, a definição das colunas deve ser filho direto da row, ficando:

<div class="row">
   <div v-for="img in fotos" class="col-md-3">
        <article>
                <img :src="img.url" >
         </article>
    </div>
</div>

Isso vai fazer com que o Grid funcione, talvez será preciso definir um tamanho máximo para as imagens, algo do tipo:

img {
    width: 100%;
}

Para que elas não ultrapassem o tamanho dos seus elementos pais.

Espero ter ajudado.