Nuxt asyncData返回包含Nuxt内容的json5文件的空数组。

Question

我使用asyncData方法检索json5文件的内容，并得到一个空数组。

我的文件位于内容/myfile.json 5

内容如下：

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

我的方法是：

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

    return {
      test
    }
  }

如果我使用嵌套在目录中的常规.json文件，比如/content/place/places.json，我也无法获取数组。结果是一个对象，其中填充了数组的第一项。它看起来只有当它位于根内容文件夹时才能工作。我在医生里找不到任何解释。

Answer 1

下面是一个简单的/pages/index.vue文件，包含两个用例

<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文件不工作，不确定它是否需要任何特殊的语法或模块来处理它。

同时，case 1️⃣完全可以处理任何类型的文件(nice.json、places.json5、yolo.json5)。您也可以用.where删除行，使它们都有。

这里是一个屏幕截图，显示了我的示例中包含的5个对象(横跨所有3个文件)。

​

​

正如这里的文件中所解释的那样。

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