title: How can i looping the card in container using vue js
body: <p>i use use the v-for directive to render a list of items based on an array but could not find any way to looping the whole card content. i am trying to looping this card in whole container. how can i loop this card or col-md-4 multiple in container,also change data during looping the cards.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"&gt;
      &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" href="https://the-allstars.com/vue2-animate/dist/vue2-animate.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="app"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"&gt;
  
                      &lt;div class="card text-center"&gt;
                          &lt;img class="card-img-top" :src="cardinfo[currentIdx].image" alt="" width="100%"&gt;
                          &lt;div class="card-block"&gt;
                              &lt;h4 class="card-title"&gt;{{ cardinfo[currentIdx].title }}&lt;/h4&gt;
                              &lt;p class="card-text"&gt;{{ cardinfo[currentIdx].details }}&lt;/p&gt;
                              &lt;a class="btn btn-primary" href="#"&gt;Read More&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
      &lt;!-- vue code start from here --&gt;
      &lt;script&gt;
          var dummyData = [{
              title: "This is the blog title",
              details: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa",
              image: "https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?h=350&amp;amp;auto=compress&amp;amp;cs=tinysrgb",
          }, {
              title: "This is the blog title2",
              details: "alrazy ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa",
              image: "https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?h=350&amp;amp;auto=compress&amp;amp;cs=tinysrgb",
          } {
              title: "This is the blog title3",
              details: "mohim ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa",
              image: "https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?h=350&amp;amp;auto=compress&amp;amp;cs=tinysrgb",
          }]
          var app = new Vue({
              el: '#app',
              data: {
                  cardinfo: dummyData,
                  currentIdx: 0
              },
              methods: {
  
  
              }
  
          })
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>