Go back to Examples

CMS data inside component

Component - Advanced

A component inside a loop can be connected to CMS fields using ${} syntax. This allows you to create complex components that can be reused without needing to use the same item name and field name.

                <!-- Component: blog-card -->
<div>
    <h2 v-html="name"></h2>
    <p v-html="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" v-data="{'name': '${post.name}', 'excerpt': '${post.excerpt}'}"></template>
    </div>
</template>
Component inside loop Dynamic class on component