在Nuxt Content API查询中使用$contains的问题

问题分析 #

你当前通过自动生成的API查询返回空结果，核心原因是数组类型的字段（tags）不能用_contains操作符——_contains是针对字符串字段判断是否包含子串的，数组字段需要用_has来检查是否包含指定元素。

修复API查询的写法 #

把_contains替换成_has，同时建议用JSON.stringify生成参数，避免手动转义引号出错：

const getPostsByTag = async (tag) => {
  const params = JSON.stringify({
    where: {
      tags: { _has: tag }
    }
  })
  const postsArr = await fetch(`/api/_content/query?_params=${params}`).then(res => res.json())
  return postsArr
}

更优方案：直接在<script setup>中处理（推荐） #

完全不需要调用自动API，直接在组件内使用queryContent，同时通过useRoute获取URL查询参数，代码更简洁易维护：

<script setup>
const route = useRoute()
// 获取URL中的tag参数，比如 /blog?tag=test
const currentTag = route.query.tag

// 直接查询指定目录下带目标标签的文章
const { data: posts } = await useAsyncData('tagged-posts', async () => {
  return queryContent('testing') // 指定/content/testing目录
    .where({ tags: { _has: currentTag } })
    .sort({ created: -1 }) // 可选：按创建时间倒序排列
    .find()
})
</script>

关键说明 #

• queryContent('testing')：精准定位/content/testing目录下的内容
• _has：专门用于数组字段，判断数组是否包含目标元素
• useRoute()：直接获取当前路由的查询参数，无需手动解析URL
• useAsyncData：Nuxt 3推荐的数据获取方式，自带缓存和加载状态管理

内容的提问来源于stack exchange，提问作者Clarinetking