Vue3 Script Setup中如何过滤Symfony API Platform返回的数组

问题分析 #

• tutorials初始值设为字符串""，应该初始化为空数组[]，避免数据加载前的渲染异常
• 左列未添加过滤逻辑，导致显示所有数据
• 右列绑定的filtered变量未定义，因此无数据展示

解决方案：使用计算属性过滤数据 #

在Vue3的Script Setup中，用computed创建响应式过滤结果，数据更新时过滤结果会自动同步。

修正后的完整代码：

<script setup>
import { ref, computed } from "vue"; // 导入computed
import TutorialDataService from "../services/TutorialDataService";

// 初始化为空数组，确保响应式数据类型正确
const tutorials = ref([]);

// 获取数据逻辑保持不变
TutorialDataService.getAll()
  .then((response) => {
    tutorials.value = response.data["hydra:member"];
    console.log("---Retrieve OK---");
  })
  .catch((e) => {
    console.log(e);
  });

// 计算属性：筛选已发布的数据
const publishedTutorials = computed(() => {
  return tutorials.value.filter(item => item.published === true);
});

// 计算属性：筛选未发布的数据
const unpublishedTutorials = computed(() => {
  return tutorials.value.filter(item => item.published === false);
});
</script>

<template>
<div class="grid grid-cols-2 gap-4">
    <div class="bg-slate-50/10 p-3 rounded-md">Published:
        <ul class="list-disc list-inside">
            <!-- 绑定过滤后的已发布数据 -->
            <li v-for="item in publishedTutorials" :key="item.id">
                {{ item.title }} - <b>{{ item.published }}</b>
            </li>
        </ul>
    </div>
    <div class="bg-red-300  p-3 rounded-md text-black">Unpublished:
        <ul class="list-disc list-inside">
            <!-- 绑定过滤后的未发布数据 -->
            <li class="text-black" v-for="item in unpublishedTutorials" :key="item.id">
                {{ item.title }}
            </li>
        </ul>
    </div>
</div>
</template>

修改说明 #

1. 初始化修正：将tutorials初始值改为[]，保证数组类型的响应式数据，避免过滤时出现类型错误
2. 计算属性创建：新增两个computed属性，分别对tutorials数组做过滤，精准筛选出published为true和false的数据
3. 模板绑定更新：左列绑定publishedTutorials，右列绑定unpublishedTutorials，实现分栏展示对应数据

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