Go back to Examples

Nested collection list loops

CMS - Intermediate

Nested loops allow you to render dynamic content from another collection list inside an existing collection list loop. For example if you have a blog post and want to render the tags related to that post.

                <div class="row">
    <template v-for="post in posts">
        <div class="col">
            <h1 v-html="post.name"></h1>
            <img v-bind:src="post.image" />
            <template v-for="tag in post.tagItems">
                <a v-bind:href="'/' + tag.collectionSlug + '/' +  tag.slug" v-html="tag.name"></a>
            </template>
        </div>
    </template>
</div>