How to loop through a block of Div element N number of times?

Question

I am trying to display Cards next to one another (4 cards per row). Here is my my html for a Card:

    <div class="HelloWorldCard">
        <div class="cardwithlink">
            <div class="row">              
                <div class="Hellocard cardwithlink style="height: 170px;">
                    <a href="//www.https://www.google.com/" title="Google home page" target="">
                        <div class="content">
                            <div class="HelloTopSection" style="height: 110px;">
                                <div class="HelloCardTitle">{{ title }}</div>
                                <div class="HelloCardExcerpt">{{ description }}</div>
                            </div>
                        </div>
                    </a>
                </div>               
            </div>
        </div>
    </div>

<Script>
export default{
name: "HelloWordCard",
props:{
title: String,
description: String
},
};

I have about 100 cards that I want to display on my page. I can't just copy and past this html 100 times since that would be a waste of time. Is it possible to print out this block of html in a loop 100 times ?

The real issue I am having is that the cards are displaying 1 card on each row. I am trying to get them to display 4 on each row.

@DanielprabhakaranN Not exactly sure how that would work. Is it possible for you to demo? — , Aug 26 '21 at 04:42
Can you provide a full snippet of your code? like codesandbox? — Danielprabhakaran N, Aug 26 '21 at 04:46
Does this answer your question? [Vue Js - Loop via v-for X times (in a range)](https://stackoverflow.com/questions/44617484/vue-js-loop-via-v-for-x-times-in-a-range) — Martin, Aug 26 '21 at 08:39

score 3 · Accepted Answer · answered Aug 26 '21 at 05:44

Your row should not be inside your card component.

It should be in a parent component holding the card, where you can apply @Srijan Katuwal's CSS. For example:

<template>
  <div id="app">
    <div class="row">
      <HelloWorldCard
        v-for="index in 100"
        :key="index"
        title="Test"
        description="Test description"
      />
    </div>
  </div>
</template>

<script>
import HelloWorldCard from "./components/HelloWorldCard";

export default {
  name: "App",
  components: {
    HelloWorldCard,
  },
};
</script>

<style>
.row {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 30px;
}
</style>

Your component now is:

<template>
  <div class="Hellocard cardwithlink" style="height: 170px">
    <a href="//www.https://www.google.com/" title="Google home page" target="">
      <div class="content">
        <div class="HelloTopSection" style="height: 110px">
          <div class="HelloCardTitle">{{ title }}</div>
          <div class="HelloCardExcerpt">{{ description }}</div>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  name: "HelloWordCard",
  props: {
    title: String,
    description: String,
  },
};
</script>

You can see it in action here: https://codesandbox.io/s/hungry-hodgkin-2sklq?file=/src/App.vue:0-476

score 2 · Answer 2 · edited Jul 15 '22 at 22:38

2

You can use v-for directive to show a div block for n number of times. Vue offical documentation has similar example v-for

Also, to display 4 cards in a single row, you can use CSS grid or flex. A grid implementation can be done as below

.row {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 30px;
}

edited Jul 15 '22 at 22:38

tony19

125,647
18
229
307

answered Aug 26 '21 at 04:50

Srijan Katuwal

151
2
8

not able to see how that would work in my case. – Aug 26 '21 at 04:53

score 1 · Answer 3 · answered Aug 26 '21 at 04:45

You need to write following CSS to display cards next to each other

* {
  box-sizing: border-box;
}
.row {
    display: block;
    width: 100%;
}

.card {
   display: block;
   float: left;
   width: 25%;
   padding: 10px;
   border: 1px solid grey;
 }

<div class="row">
  
  <div class="card">Card Data</div>
  <div class="card">Card Data</div>
  <div class="card">Card Data</div>
  <div class="card">Card Data</div>
  <div class="card">Card Data</div>
  <div class="card">Card Data</div>
</div>

How to loop through a block of Div element N number of times?

3 Answers3