如何在Nuxt 3中对useFetch函数进行数据过滤？

我目前通过模板中的v-if实现了仅显示开始日期早于今日的数据，但想换成在JavaScript层面完成过滤，避免加载全部数据。现有代码如下：

当前JS代码 #

const { data: persons } = await useFetch(urlPersons)
const date = new Date();
const fullYear = date.getFullYear()+"-"+(date.getMonth()+1)+"-0"+date.getDate();

原模板代码 #

<h1>Testing api</h1>
<div v-for="data in persons" >
    <div>Name :{{data.name}}</div>
    <div>Startdate : {{data.startdate}}</div>
    <div>date today : {{fullYear}}</div>
    <div v-if="data.funfacts.funFact1">{{ data.funfacts.funFact1 }}</div>
</div>

当前用v-if过滤的模板代码 #

<div v-for="data in persons" >
<div v-if="data.startdate>fullYear">
  <div>Name :{{data.name}}</div>
  <div>Startdate : {{data.startdate}}</div>
  <div>date today : {{fullYear}}</div>
  <div v-if="data.funfacts.funFact1">{{ data.funfacts.funFact1 }}</div>
</div>

两种JavaScript层面的过滤方案 #

方案1：获取数据后前端过滤 #

拿到接口返回的persons数据后，直接用数组方法过滤出符合条件的数据，模板循环过滤后的数组即可，不用再写v-if。

修改后的JS代码：

const { data: persons } = await useFetch(urlPersons)
const date = new Date();
// 统一日期格式为YYYY-MM-DD，和接口返回的startdate格式对齐
const today = new Date(date.getFullYear(), date.getMonth(), date.getDate()).toISOString().split('T')[0];

// 用computed响应式处理过滤逻辑
const filteredPersons = computed(() => {
  if (!persons.value) return [];
  return persons.value.filter(person => {
    // 转成Date对象比较，避免字符串格式差异导致的判断错误
    return new Date(person.startdate) < new Date(today);
  });
});

对应的模板代码：

<h1>Testing api</h1>
<div v-for="data in filteredPersons" :key="data.name">
    <div>Name :{{data.name}}</div>
    <div>Startdate : {{data.startdate}}</div>
    <div>date today : {{today}}</div>
    <div v-if="data.funfacts.funFact1">{{ data.funfacts.funFact1 }}</div>
</div>

方案2：请求时让后端过滤（更高效） #

如果你的API支持日期参数过滤，直接在请求URL里带上过滤条件，让后端只返回符合要求的数据，能减少前端加载的数据量，性能更优。

比如API支持?startdate_lt=YYYY-MM-DD这类参数，代码可以这么写：

const date = new Date();
const today = new Date(date.getFullYear(), date.getMonth(), date.getDate()).toISOString().split('T')[0];
// 拼接过滤参数到请求URL
const filteredUrl = `${urlPersons}?startdate_lt=${today}`;
const { data: filteredPersons } = await useFetch(filteredUrl);

模板直接循环filteredPersons即可，无需再做前端过滤。

内容的提问来源于stack exchange，提问作者Mathias Van Langendonck