[Vuejs]-How can i looping the card in container using vue js

by

4👍

I didn’t see you use v-for directive, and you don’t need to use template like {{ cardinfo[currentIdx].details }}.

As Vue Official Guide defined:

the v-for directive to render a list of items based on an array. The
v-for directive requires a special syntax in the form of item in
items, where items is the source data array and item is an alias for
the array element being iterated

inside v-for blocks we have full access to parent scope properties.
v-for also supports an optional second argument for the index of the
current item

so one common v-for directive usage like v-for="(item, index) in items". You need to go through above guide first before coding.

PS: pay an attention at Key:

Below is one sample:

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&auto=compress&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&auto=compress&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&auto=compress&cs=tinysrgb",
}]

var app = new Vue({
    el: '#app',
    data: {
        cardinfos: dummyData,
        currentIdx: 0
    },
    methods: {


    }

})
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://the-allstars.com/vue2-animate/dist/vue2-animate.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" v-for="(cardinfo, index) in cardinfos" :key="index">

                <div class="card text-center">
                    <img class="card-img-top" :src="cardinfo.image" alt="" width="100%">
                    <div class="card-block">
                        <h4 class="card-title">{{ cardinfo.title }}</h4>
                        <p class="card-text">{{ cardinfo.details }}</p>
                        <a class="btn btn-primary" href="#">Read More</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

Leave a comment