nuxt asyncdata返回带有NUXT内容的JSON5文件的空数组

Question

我正在使用Asyncdata方法检索JSON5文件的内容，并且我会得到一个空数组。

我的文件位于content/myfile.json5上的

内容是：

[
   {
     id: 1
   },
   {
     id: 21
   }
]

我的方法是：

async asyncData({ $content}) {
    const test = await $content('myfile').fetch()

    return {
      test
    }
  }

如果我使用嵌套在目录中的常规.json文件，例如/content/places/places.json，我也无法获取数组。 。 结果是一个装有我数组的第一项的对象。看起来只有在其位于根内容文件夹中的情况下才起作用。 我找不到文档中的任何解释。

Answer 1

这是一个简单的 /pages/index.vue 文件，其中包含 2 个用例

<template>
  <pre>{{ nuxtContent }}</pre>
</template>

<script>
export default {
  async asyncData({ $content }) {
    return {
      1️⃣
      // nuxtContent: await $content('testfoobar', { deep: true })
      //   .where({ slug: { $contains: 'yolo' } })
      //   .fetch(),

      2️⃣
      nuxtContent: await $content('testfoobar', 'nice').fetch(),
    }
  },
}
</script>

我的项目结构

nice.json

{
  "name": "bob",
  "age": 25,
  "city": "New York"
}

places.json5

[
  {
    id: 1
  },
  {
    id: 21
  }
]

yolo.json5

[
  {
    id: 777
  },
  {
    id: 999
  }
]

案例 2️⃣ 不适用于.json5 文件，不确定它是否需要任何类型的特殊语法或模块来使用它。
同时，案例 1️⃣ 适用于任何类型的文件（nice.json、places.json5、yolo.json5）。您还可以删除带有 .where 的行以获取所有这些内容。

下面的屏幕截图显示了我在示例中拥有的 5 个对象（跨所有 3 个文件）。

如此处文档中所述。

PS：如果您还想拥有 hello.md （也在 /content 目录中），您可以使用根路径，如下所示： await $content( '/', { deep: true }) 您将获得 hello.md + 5 个其他嵌套文件。