Nuxt 3异步数据场景下项目列表按分类过滤实现咨询

实现步骤 #

1. 定义响应式过滤条件
   用ref创建响应式变量存储用户输入的分类关键词，确保输入框的变化能实时触发过滤逻辑更新。

2. 获取异步项目数据
   保留你原有的useSanityQuery调用逻辑，注意data是Nuxt异步数据的响应式对象，访问原始项目数组需通过data.value?.projects。

3. 创建计算属性处理过滤逻辑
   基于原始项目数组和过滤关键词编写计算属性，返回符合条件的项目，同时处理数据未加载完成的状态避免报错。

4. 模板绑定与渲染
   将输入框与响应式过滤变量绑定，渲染计算属性返回的过滤后列表，并处理加载状态和无匹配项的提示。

完整代码示例 #

脚本部分（Composition API）

<script setup>
import { ref, computed } from 'vue'
import { mainStore } from '~/stores/main' // 适配你的store实际路径

// 响应式过滤关键词
const filterGenre = ref('')

// 获取异步项目数据
const { data, pending } = await useSanityQuery(
  singleProjectQuery,
  params,
  mainStore.sanityClient
)

// 计算属性：过滤项目
const filteredProjects = computed(() => {
  // 数据未加载时返回空数组
  if (!data.value?.projects) return []
  
  const targetGenre = filterGenre.value.trim().toLowerCase()
  // 关键词为空时返回全部项目
  if (!targetGenre) return data.value.projects
  
  // 按分类模糊过滤（忽略大小写）
  return data.value.projects.filter(project => {
    // 若genre是字符串类型的分类
    return project.genre.toLowerCase().includes(targetGenre)
  })
})
</script>

模板部分

<template>
  <!-- 分类过滤输入框 -->
  <input
    type="text"
    v-model="filterGenre"
    placeholder="输入分类名称过滤..."
  />

  <!-- 加载状态提示 -->
  <div v-if="pending">加载中...</div>

  <!-- 渲染过滤后的项目列表 -->
  <div v-else>
    <div v-for="project in filteredProjects" :key="project._id" class="project-card">
      <h3>{{ project.title }}</h3>
      <p>{{ project.description }}</p>
      <span>{{ project.genre }}</span>
    </div>
    
    <!-- 无匹配项目提示 -->
    <div v-if="filteredProjects.length === 0">暂无匹配的项目</div>
  </div>
</template>

额外适配说明 #

• 如果项目的genre是数组类型（一个项目属于多个分类），可修改过滤逻辑为：

  return project.genre.some(item => item.toLowerCase().includes(targetGenre))
  

• 若需要精确匹配分类，去掉toLowerCase()和includes()，改用全等判断即可。

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