Understanding Nested Lists

Here’s a blog post card, with 4 collection lists

The items shown from the Post are

The items shown from the Author are

The item shown from Tag is

The item shown from Category is

If you’re confused about the word Name appearing in all the lists, it’s just that it’s what the first Field of every Collection is called.

Here’s the Navigator for the card

You can count the 4 CMS Collection Lists.

The first CMS List is the Blog Post. We can see the post image, the link on the heading (the name of the post), and the excerpt paragraph.

Then there are 3 CMS Lists with If=”post.author, If=”post.tag, and If=”post.category.

We are saying “If the Post author is This author, show the related fields. You can see the Author image and Name, the post Tag, and the post Category.

In the image above there is a highlighted paragraph on the Navigator. It’s not too easy to understand, but this is the Date of the Post. In the Options Panel you can see

Let’s explore part of the HTML, for the Tag

<template v-for="tag in tags">

<template v-if="post.tags && post.tags.includes(tag.id)">

<span class="badge bg-primary" v-html="tag.name">Primary Badge</span>

</template>

</template>

<template>  holds the recurring list from the CMS collection list.

v-for  renders, or shows, the content multiple times, depending on the size of the list. In this case, it’s going to render the Tag from the Tags Collection list.

v-if  renders the list item if the condition is met. In this case, the condition requires a Tag in the Post.

<span> holds the content, in this case the Tag Name.

v-html  renders the specific Name of the Tag (NASDAQ, in place of the words Primary Badge)

Note: For images you’ll see something like

<img class="w-8 h-8 rounded-full"

v-bind:src="author.image" />

Where v-bind  replaces v-html  as the code to render the specific image (in this case the Author Image)