在Nuxt3中使用Directus模块过滤查询结果的正确方法

组件内直接查询过滤 #

在Vue组件中使用useDirectusItems时，需遵循Directus的过滤语法传入filter参数，核心是必须用操作符包裹字段值，不能直接写active: true：

<script setup>
const { data: prestations } = await useDirectusItems('Prestations', {
  filter: {
    active: { _eq: true } // 使用_eq操作符匹配等于true的条目
  }
})
</script>

Server端路由中过滤查询 #

如果在Server目录的API路由中获取数据，写法如下：

// server/api/prestations.get.ts
export default defineEventHandler(async (event) => {
  const directus = useDirectus()
  return await directus.items('Prestations').readByQuery({
    filter: {
      active: { _eq: true }
    }
  })
})

全局配置默认过滤参数 #

若希望所有对Prestations集合的查询都默认过滤active: true的条目，可在nuxt.config.ts中配置：

export default defineNuxtConfig({
  modules: ['@nuxtjs/directus'],
  directus: {
    // 针对特定集合设置默认查询参数
    collectionQueries: {
      Prestations: {
        filter: {
          active: { _eq: true }
        }
      }
    },
    // 若要给所有集合设置全局默认过滤，使用globalQuery
    // globalQuery: {
    //   filter: { active: { _eq: true } }
    // }
  }
})

常见踩坑点 #

• 字段名区分大小写，确保active和Directus集合中的字段名称完全一致
• 过滤必须使用Directus支持的操作符（如_eq、_gt、_contains等），直接写字段值不会生效
• 检查@nuxtjs/directus模块版本，确保和Nuxt3、Directus服务端版本兼容

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