I’m trying to apply the Tailwind’s divide to the divs created with the v-for of the Vue3:
<div v-for="(i) in [1, 2, 3]" class="divide-y divide-red-400">
<div>{{ i }}</div>
</div>
But no dividers are applied:
I expect to see this:
(Note: this image was created with the same parent div’s class, but without v-for loop, just by statically adding child divs)
So is there any way to apply divider to the items in v-for loop? Any alternative that produces the same effect would do as well. Thanks
The divide-y-* classes are designed such that they would go on the parent of the elements that should be divided. Hence, you’d add the divide-y-* classes to the parent of the element that has the v-for directive. This is because it is the element with the v-for directive that gets repeated:
Vue.createApp().mount('#app');<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.25/vue.global.prod.min.js" integrity="sha512-sT2a1EG7Kmio5Wia95orR00Ar8F78KIVv/AHrV0998mocqYsjoG2YiYCARXrXdaMog05zYTrtaVG3+uW4UhVEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.3"></script>
<div id="app" class="divide-y divide-red-400">
<div v-for="(i) in [1, 2, 3]">
<div>{{ i }}</div>
</div>
</div>