使用 Nuxt Content 在 Nuxt 3 中查询 JSON 数组

Question

如何查询 JSON 数组以获取 Nuxt 3 和 Nuxt Content 中的单个元素？

├── @nuxt/[email protected]
└── [email protected]

content/people.json

[
  {
    "name": "Name1",
    "id": 1
  },
  {
    "name": "Name2",
    "id": 2
  }
]

查询所有人员数据结果如下：

[
  {
    "_path": "/people",
    "_dir": "",
    "_draft": false,
    "_partial": false,
    "_locale": "en",
    "body": [
      {
        "name": "Name1",
        "id": 1
      },
      {
        "name": "Name2",
        "id": 2
      }
    ],
    "_id": "content:people.json",
    "_type": "json",
    "title": "People",
    "_source": "content",
    "_file": "people.json",
    "_extension": "json"
  }
]

pages/people/[id].vue

<template>
  <pre>{{ data }}</pre>
</template>

<script setup>
const route = useRoute();
const id = route.params.id;

const data = await queryContent("people")
  .where({ id }) // **What should this be? I can't seem to get any variants to work**
  .findOne();
</script>

我可以在索引页上查询完整的人员列表。但是，我现在想从

[id].vue

页面上的 JSON 数组中获取单个“人”，但我不确定如何使用 Nuxt Content 中的

where

子句查询此文档。

Answer 1

在我看来，这个问题来自于对

where()

子句功能的误解。根据nuxt-content docs，该子句用于按查询过滤结果。这意味着结果来自 nuxt 应用程序的 content 目录，而不是每个文件中的 inside 内容。它过滤文件和文件夹，而不是它们的内容。例如，当我们说

const { data } = await useAsyncData('list', () => queryContent('/list').where({ title: 'list1 page' }).findOne());

时，我们想要过滤content/list目录中的

files

，并找到具有

title: 'list1 page'

的文件。我们无法过滤或更改例如 list1.md 或 list1.json 或...带有

where()

子句的文件中的内容。

对于这个问题的情况，我认为我们有两个选择：

• 第一个是，我们在纯 JavaScript 的帮助下（例如使用

  filter() 方法

  ）从

  people/[id].vue

  （不使用

  queryContent

  ）获取结果后，过滤 where() 文件中的结果，以根据id数据获取人员信息

• 我认为更好的第二个选项是更改数据结构，因为让我们能够从 nuxt-content 特性和功能中受益。为此，我们必须在

  content

  目录中创建一个名为

  people

  的文件夹。然后在其中创建

  1.person1.json

  、

  2.person2.json

  等文件。在每个文件中，我们都有该特定人的 json 数据，如下代码所示：

  { "姓名": "姓名1", “id”：1 }

  然后使用

  pages/people/[id].vue

  文件中的这样的代码，您可以根据该人的id自动访问每个人的数据：

<template>
  <div>
    <p>{{ $route.params.id }}</p>
  </div>
</template>

<script setup>
const route = useRoute();
console.log(route.params.id);
const { data } = await useAsyncData('people', () => queryContent('people', "person"+ route.params.id).findOne());
console.log(data.value.name);
</script>

如您所见，在第二个选项中，我们根本不需要使用

where()

子句，因为不断变化的数据结构使过滤过程变得更好、更容易。