Javascript Nuxt/content-如何在文章页面上显示文章列表（_slug）

我正在使用nuxt/content模块创建一个文档站点

在上，他们有一篇文章，在单独的index.vue页面上显示内容，在_slug.vue页面上显示文章详细信息

我想做的是使用不同的布局在同一页面上显示文章/帖子的列表

以下是我正在使用的文件夹结构：

content (folder)
    articles (folder)
        article1.md
        article2.md
        article3.md
pages (folder)
    blog (folder)
        _slug.vue
        index.vue

这是我的_slug.vue文件：

<template>
  <div class="flex">
    <aside class="w-1/3">
      <ul>
        <li v-for="article in articles" :key="article.slug">
          <NuxtLink :to="{ name: 'blog-slug', params: { slug: article.slug } }">
            <div>
              <h2>{{ article.title }}</h2>
            </div>
          </NuxtLink>
        </li>
      </ul>
    </aside>
    <main class="w-full">
      <h1>{{ article.title }}</h1>

      <p>Article last updated: {{ formatDate(article.updatedAt) }}</p>

      <nuxt-content :document="article" />

      <prev-next :prev="prev" :next="next" />
    </main>
    <aside class="w-1/3">
      <h4>On this page</h4>
      <nav>
        <ul>
          <li v-for="link of article.toc" :key="link.id">
            <NuxtLink :to="`#${link.id}`" :class="{ 'py-2': link.depth === 2, 'ml-2 pb-2': link.depth === 3 }">{{ link.text }}</NuxtLink>
          </li>
        </ul>
      </nav>
    </aside>
  </div>
</template>

<script>
  export default {

      async asyncData({ $content, params }) {
        const articles = await $content('articles', params.slug)
          .only(['title', 'slug'])
          .sortBy('createdAt', 'asc')
          .fetch()

        const article = await $content('articles', params.slug).fetch()

        const [prev, next] = await $content('articles')
          .only(['title', 'slug'])
          .sortBy('createdAt', 'asc')
          .surround(params.slug)
          .fetch()

        return {
          articles,
          article,
          prev,
          next
        }
      },
    methods: {
      formatDate(date) {
        const options = { year: 'numeric', month: 'long', day: 'numeric' }
        return new Date(date).toLocaleDateString('en', options)
      }
    }
  }
</script>

{{article.title}}


{{article.title}}
文章最后更新：{{formattate（Article.updatedAt）}

在这一页上


{{link.text}


导出默认值{
异步数据（{$content，params}）{
const articles=await$content（'articles'，params.slug）
.仅限（['title'，slug']）
.sortBy（'createdAt'，'asc'）
.fetch（）
const article=await$content（'articles'，params.slug）.fetch（）
const[prev，next]=wait$content（'articles'））
.仅限（['title'，slug']）
.sortBy（'createdAt'，'asc'）
.环绕（参数缓动）
.fetch（）
返回{
文章,，
文章
前，
下一个
}
},
方法：{
格式日期（日期）{
常量选项={year:'numeric'，month:'long'，day:'numeric'}
返回新日期（Date）.toLocaleDateString（'en'，选项）
}
}
}

如果我在index.vue页面上使用“Display all articles”（显示所有文章）代码，它可以工作，但在_slug.vue上一起工作，列表现在为空

以下是正确显示帖子的索引：

<template>
   <div>
    <h1>Blog Posts</h1>
    <ul>
      <li v-for="article of articles" :key="article.slug">
        <NuxtLink :to="{ name: 'blog-slug', params: { slug: article.slug } }">
          <div>
            <h2>{{ article.title }}</h2>
          </div>
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    async asyncData({ $content, params }) {
      const articles = await $content('articles', params.slug)
        .only(['title', 'slug'])
        .sortBy('createdAt', 'asc')
        .fetch()

      return {
        articles
      }
    }
  }
</script>

<style>

</style>

博客帖子


{{article.title}}


导出默认值{
异步数据（{$content，params}）{
const articles=await$content（'articles'，params.slug）
.仅限（['title'，slug']）
.sortBy（'createdAt'，'asc'）
.fetch（）
返回{
文章
}
}
}

---

我缺少什么吗？

由于您的查询不正确，因此无法检索到任何文章，您必须在

文章

文件夹中搜索：

const articles=wait$content（'articles'）//而不是$content（'articles'，params.slug）
.仅限（['title'，slug']）
.sortBy（'createdAt'，'asc'）
.fetch（）

请提供故障部件的完整来源。我不完全理解当前代码中包含3个asyncData函数的“脚本”部分。当然，我现在确实更新了它。：）@曼尼，我明白你说的了。即使在使用asyncData函数更新代码后，错误也消失了，但我无法查看文章列表。