Greetings fellow Stack Overflow members!
I am currently working on a project using Vue3 + tailwindcss.
My goal is to create a dynamic grid layout similar to the following:
Corrrection: Here, I am aiming for a repetitive layout with dynamic loop items
Below is the snippet of my code:
<template>
<div class="min-h-screen flex items-center bg-purple-500">
<div class="flex-1 max-w-4xl mx-auto p-8">
<ul class="grid grid-cols-12 gap-8">
<template v-for="(i,index) in 8" :key="index">
<li
class="col-span-12 sm:col-span-6 md:col-span-4 bg-white rounded-lg shadow-xl"
v-if="updateCounter(index) || (index+1) % 8 != 0"
>
<div class="h-24"> {{ index }} {{updateCounter(index) }}</div>
</li>
<li
v-else
class="col-span-12 sm:col-span-6 md:col-span-6 bg-white rounded-lg shadow-xl"
>
<div class="h-24">{{ index }} </div>
</li>
</template>
</ul>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const count = ref<number>(2)
const checkForCols = ref<boolean>(false);
const total = ref<number>(6)
const updateCounter = (index: any) => {
if( total.value == index ){
total.value = total.value + 6 + count.value
return true
} else {
return false
}
}
</script>
Unfortunately, my output is not as expected.
I have already dedicated 2 days to solving this issue, but to no avail.
Can anyone provide some guidance on how to achieve the desired outcome?
Thank you in advance for your assistance.