CODEWITHSUNDEEP
htmlcssvue.jsvuejs2vue-component
user9348468
user9348468

Reputation:

Vue.js - v-for to display images horizontally (5 by row)

I need to get the images from the service and need to display horizontally. Let's say there are 10 images. Then I need to display the first five images in the first row and the next five images in the second row. My attempt it as below.

<div style="margin-top: 5px;width: 100%;">
 <div style="display: flex">
    <ul v-for="(item,index) in body_content">
        <li style="width: 20%;display: inline">
          <img v-bind:src="item.title">
        </li>
        <br v-if="index > 6">
    </ul>
 </div>                                                                                
</div>

But it doesn't work properly. If anyone knows a way please let me know.

Upvotes: 0

Views: 1682

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You could use display:grid and grid-template-columns:repeat(5,1fr) properties like :

<div style="margin-top: 5px;width: 100%;">

    <ul  style="display: grid;grid-template-columns:repeat(5,1fr);">
        <li v-for="(item,index) in body_content" style="width: 20%;display: inline" >
          <img v-bind:src="item.title">
        </li>
    </ul>
                                                                              
</div>

It's recommend to iterate over the li not the ul and use class names to separate the style and make the template more clean.

Upvotes: 1

Related Questions