How can i looping the card in container using vue js
Question
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.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="card text-center">
<img class="card-img-top" :src="cardinfo[currentIdx].image" alt="" width="100%">
<div class="card-block">
<h4 class="card-title">{{ cardinfo[currentIdx].title }}</h4>
<p class="card-text">{{ cardinfo[currentIdx].details }}</p>
<a class="btn btn-primary" href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- vue code start from here -->
<script>
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: {
cardinfo: dummyData,
currentIdx: 0
},
methods: {
}
})
</script>
</body>
</html>
1 answers
solution1
4 2018-04-27 20:57:15
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.