I am trying to use Nuxt Content to create a blog section of my website. I have created the directory structure and some testing posts. I have also created the query that grabs the posts and stores them as a ref so they can be used on the page. My issue is that the components I see on the page do not match what is returned by the Nuxt Content query
Snippet
<script setup>
const { data: recentBlogPosts } = await useAsyncData(`content-${path}`, () => {
return queryContent()
.only(['title', 'excerpt', 'created', 'updated', 'slug', 'tags', '_id'])
.limit(5)
.sort({ 'updated': -1 })
.find()
})
index.vue Page Snippet
<nuxt-link v-for="post in recentBlogPosts" :key="post._id" :to="`blog/${post.slug}`">
<BlogPostShort class="blog-post-short"
:title="post.title"
:createdDate="post.created"
:updatedDate="post.updated"
:excerpt="post.excerpt"
:tags="post.tags" />
</nuxt-link>
The resulting website output on the page
An image of Vue DevTools showing only 5 components produced by v-for directive
I have tried adding a :key="post._id"
to the code but that hasn't solved anything. I thought giving Nuxt a means of tying a post to the data on the backend might help it but sadly no such luck
EDIT Adding image of recentBlogPosts variable added to page via mustache-syntax (not allowed to inline it because I'm a low-rep newbie):
The issue appeared to be my using a v-for directive on a <NuxtLink>
tag. The new code below works:
<div v-for="post in recentBlogPosts" :key="post._id">
<NuxtLink :to="`blog/${post.slug}`">
<BlogPostShort class="blog-post-short"
:title="post.title"
:createdDate="post.created"
:updatedDate="post.updated"
:excerpt="post.excerpt"
:tags="post.tags" />
</NuxtLink>
</div>