Print Cards with v-for - Vue.js

2

I am extracting information from axios and I am printing it from my v-for and printing my cards but it does it in a way that I do not understand why.

Right now I have my cards. The information is already extracted.

I'm supposed to print like this

but when I add to my a mid Div the v-for="lista in listaPro Print it to me this way

<div class="col-9 ">
  <div class="row">
    <div class="col-4" id="listaproyectos">
      <div class="card text-align textocorrecto" v-for="lista in listaPro">
        <!--Card image-->
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" alt="Card image cap">

        <!--Card content-->
        <div class="card-body">
          <!--Title-->
          <h4 class="card-title">Card title</h4>
          <!--Text-->
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Button</a>
        </div>
      </div>
    </div>
  </div>
</div>

I have also put in another div the v-for="lista in listaPro But I do not know why that happens.

    
asked by Alex Burke Cooper 30.03.2018 в 12:24
source

1 answer

4

I already solved it, I just put it that way

<div class="row" id="listaproyectos" >
   <div class="col-4" v-for="lista in listaPro"> 
  </div>
</div>
    
answered by 30.03.2018 / 21:05
source