Vue v-for 指令导致意外的附加组件

Question

我正在尝试使用 Nuxt Content 创建我网站的博客部分。我已经创建了目录结构和一些测试帖子。我还创建了抓取帖子并将它们存储为引用的查询，以便它们可以在页面上使用。我的问题是我在页面上看到的组件与 Nuxt 内容查询返回的内容不匹配

片段

<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 页面片段

<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>

页面上生成的网站输出

Vue DevTools 的图像仅显示 v-for 指令生成的 5 个组件

我尝试在代码中添加一个

:key="post._id"

，但这并没有解决任何问题。我认为给 Nuxt 一种将帖子绑定到后端数据的方法可能会有所帮助，但遗憾的是没有这样的运气

编辑 添加通过 mustache-syntax 添加到页面的 recentBlogPosts 变量的图像（不允许内联它，因为我是一个低代表新手）：

Answer 1

问题似乎是我在

<NuxtLink>

标签上使用 v-for 指令。下面的新代码有效：

<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>