Issue
//1st column
<div class="container-1">
<div v-for = "item2 in arrayDivs1" class="card-1" >
<q-card-main >
<div style="background">
<!--<img src="/statics/imgs/serenitea.jpg">-->
<h2>{{item2.price}}</h2>
<!--<q-card-actions>
<q-btn flat label="7:30PM" />
</q-card-actions> -->
</div>
</q-card-main>
</div>
</div>
//2nd column
<div class="container-1">
<div v-for = "item2 in arrayDivs1" class="card-1" >
<q-card-main >
<div style="background">
<!--<img src="/statics/imgs/serenitea.jpg">-->
<h2>{{item2.price}}</h2>
<!--<q-card-actions>
<q-btn flat label="7:30PM" />
</q-card-actions> -->
</div>
</q-card-main>
</div>
</div>
//3rd column
<div class="container-1">
<div v-for = "item2 in arrayDivs1" class="card-1" >
<q-card-main >
<div style="background">
<!--<img src="/statics/imgs/serenitea.jpg">-->
<h2>{{item2.price}}</h2>
<!--<q-card-actions>
<q-btn flat label="7:30PM" />
</q-card-actions> -->
</div>
</q-card-main>
</div>
</div>
//.. copy paste up to 5th column
What's a more efficient way of writing this? instead of writing the same HTML/CSS block 5 times repeatedly?
Is there a 2d for-loop we can do to create this grid layout with less code? like:
for(var i =0;i<3; i++){
for(var j =0;j<3; j++){
//create your 2d cards here
}
}
Solution
It sounds like you just want to repeat the data you have N times. That being the case, you could use a range v-for to repeat the columns.
console.clear()
new Vue({
el: "#app",
data: {
arrayDivs: [0,200,400]
}
})
#app {
display: flex;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
margin: .25em;
}
.col {
display: flex;
flex-direction: column;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<div class= "col" v-for="n in 5">
<div class="box" v-for="div in arrayDivs">{{div}}</div>
</div>
</div>
Answered By - Bert
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.