Vue 3组合式API中如何按Prismic字段类型、值筛选并排序数据？

你可以通过Vue的computed属性结合数组的filter和sort方法实现需求，具体代码如下：

<script setup>
import { useAllPrismicDocumentsByType } from '@prismicio/vue'
import { computed } from 'vue'

// 获取所有运动员数据
const { data: players } = useAllPrismicDocumentsByType("player")

// 筛选门将并按球衣号升序排列
const filteredGoalkeepers = computed(() => {
  // 初始加载时players可能为undefined，先做判断避免报错
  if (!players.value) return []

  return players.value
    // 筛选位置为Goalkeeper的运动员
    .filter(player => {
      // 根据Prismic下拉字段的实际结构调整：
      // 如果下拉字段返回带value的对象，用这行：
      // return player.data.position.value === "Goalkeeper"
      // 如果下拉字段直接返回字符串值，用这行：
      return player.data.position === "Goalkeeper"
    })
    // 按球衣号升序排序（确保球衣号是数值类型）
    .sort((a, b) => a.data.jersey_number - b.data.jersey_number)
})
</script>

关键说明： #

• 响应式处理：用computed包裹筛选排序逻辑，能自动响应players数据的变化，比如Prismic内容更新时，结果会同步刷新。
• 字段结构适配：Prismic的下拉字段可能返回包含label和value的对象，也可能直接返回字符串，你需要根据自定义类型的实际配置调整filter里的判断条件。
• 排序逻辑：用a.data.jersey_number - b.data.jersey_number实现数值升序排序，避免字符串排序导致的错误（比如"10"会排在"2"前面）。
• 空值处理：初始加载时players.value可能为undefined，先判断再处理能避免控制台报错。

内容的提问来源于stack exchange，提问作者Tamás Major