CODEWITHSUNDEEP
vuejs3tailwind-3
lunacafu
lunacafu

Reputation: 366

Nested v-for for image grid

For a component in Vue I want to achieve the following layout, but exchange the img src with a path from an array of images with a v-for loop .

<template>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
    <div class="grid gap-4">
        <div>
            <img
                class="h-auto max-w-full rounded-lg"
                src="assets/images/image001.jpg"
                alt=""
            />
        </div>
        <div>
            <img
                class="h-auto max-w-full rounded-lg"
                src="assets/images/image002.jpg"
                alt=""
            />
        </div>
        <div>
            <img
                class="h-auto max-w-full rounded-lg"
                src="assets/images/image003.jpg"
                alt=""
            />
        </div>
    </div>
    <div class="grid gap-4">
        <div>
            <img
                class="h-auto max-w-full rounded-lg"
                src="assets/images/image004.jpg"
                alt=""
            />
        </div>
        <div>
            <img
                class="h-auto max-w-full rounded-lg"
                src="assets/images/image005.jpg"
                alt=""
            />
        </div>
        <div>
            <img
                class="h-auto max-w-full rounded-lg"
                src="assets/images/image006.jpg"
                alt=""
            />
        </div>
    </div>

... 

    </div>
</div>

How can I loop thru an array of image paths and create the nested columns?

Upvotes: -1

Views: 40

Answers (1)

c.m.
c.m.

Reputation: 326

Here is a little example how to loop through an array

template code:

<template>
    <div v-for="path in paths" v-bind:key="path">
        <img :src="path" />
    </div>
</template>

script code

<script setup lang="ts">

    const paths = ['assets/images/image001.jpg', 'assets/images/image002.jpg' ]

</script>

I hope it will help you, you have to do the rest of work, e.g. css wrap can help you additionally

Upvotes: -1

Related Questions