Directus 9 + Nuxt 3 如何实现博客文章按指定类别筛选？

要在Nuxt 3中通过Directus SDK筛选指定类别的文章，你需要正确使用Directus的关联过滤语法，以下是具体修改步骤：

1. 添加过滤参数到Directus查询 #

在readByQuery方法中加入filter配置，针对多对多关联的分类字段进行筛选。假设你要筛选Categories_id为1的文章，修改后的代码如下：

<script setup>
const { $directus } = useNuxtApp();

const { data: posts } = await useAsyncData("Articles", () => {
  return $directus.items("Articles").readByQuery({
    fields: [
      'id',
      'slug',
      'Featured_Image.id',
      'date_created',
      'Post_Category.Categories_id.Title',
      'Title',
      'Description',
    ],
    sort: ['-date_created'],
    // 核心过滤配置
    filter: {
      Post_Category: {
        Categories_id: {
          _eq: 1 // 替换为你需要的分类ID
        }
      }
    }
  });
});
</script>

2. 动态分类ID适配（可选） #

如果你的分类归档页面是动态路由（比如/blog/category/:categoryId），可以通过路由参数动态获取分类ID：

const route = useRoute();
const categoryId = parseInt(route.params.categoryId);

// 把filter中的固定ID替换为动态变量
filter: {
  Post_Category: {
    Categories_id: {
      _eq: categoryId
    }
  }
}

3. 修复URL过滤格式错误 #

你之前尝试的URL过滤写法有误，Directus正确的URL过滤参数格式应为：

https://irresistiblemt.in/jsfnk43b5/items/Articles?filter[Post_Category][Categories_id][_eq]=1&fields=*.*.*

模板代码无需调整 #

你现有的模板代码已经正确处理了Post_Category数组的取值逻辑，保持原样即可。

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