Go back to Examples

Component inside loop

Component - Intermediate

A component inside a loop can access the item and the item fields from the current item.

                <!-- Component: blog-card -->
<div>
    <h2>
        <a class="text-dark" v-bind:href="'/'+ post.collectionSlug + '/' + post.slug" v-html="post.name"></a>
    </h2>
    <p v-html="post.excerpt"></p>
</div>

<!-- Referencing the component inside a loop -->
<template v-for="post in posts">
    <div class="col md:w-6/12 lg:w-4/12">
        <template v-component="blog-card"></template>
    </div>
</template>
Section component CMS data inside component