Vue.js 3嵌套数组过滤实现问题求助

现有代码的核心问题 #

1. Computed属性定义错误：Vue的computed属性不能直接接收参数，你写的filteredEgg(digilist)不符合语法规范，computed依赖响应式数据自动更新，无需传参。
2. 数据遍历逻辑错误：this.digilist是仅含一个元素的数组，该元素是包含egg和baby子数组的对象。你用filter遍历this.digilist时，遍历项是整个大对象而非蛋的对象，egg.name自然不存在，导致过滤结果为空。
3. 过滤逻辑未匹配需求：现有代码仅试图过滤含name的项，完全没关联“根据蛋类型匹配进化链”的核心需求。

修正方案 #

1. 新增响应式过滤条件 #

在data中添加用于绑定用户选择的蛋类型变量：

const app = Vue.createApp({
  data(){
    return{
      selectedEggType: 'blue', // 默认选中蓝色蛋
      digilist:[/* 你的原始数据 */]
    }
  },
  // 后续代码
})

2. 编写正确的Computed属性 #

实现“根据选中蛋类型匹配对应进化链”的逻辑：

computed:{
  filteredDigimon(){
    // 取出digilist中的蛋列表和幼年期数码宝贝列表
    const { egg, baby } = this.digilist[0];
    // 找到选中类型对应的蛋
    const targetEgg = egg.find(item => item.eggtype === this.selectedEggType);
    if(!targetEgg) return [];
    // 过滤出幼年期里以该蛋为前置进化的数码宝贝
    return baby.filter(digi => digi.preDigivolution.includes(targetEgg.id));
    // 若需关联后续进化阶段（如成长期、成熟期），可根据数据库结构继续扩展逻辑
  }
}

3. 修正HTML模板 #

直接使用computed属性渲染结果，无需传参：

<!-- 可选：添加蛋类型选择器，让用户切换 -->
<select v-model="selectedEggType">
  <option value="blue">蓝色蛋</option>
  <option value="green">绿色蛋</option>
  <option value="orange">橙色蛋</option>
  <option value="pink">粉色蛋</option>
</select>

<!-- 渲染过滤后的数码宝贝 -->
<div v-for="digi in filteredDigimon" :key="digi.id">
  <h3>{{ digi.name }}</h3>
  <p>阶段：{{ digi.stage }} | 属性：{{ digi.type }}</p>
  <img :src="digi.image" :alt="digi.name" style="width: 100px;">
</div>

可选：用方法实现临时过滤 #

如果需要临时传入不同蛋类型进行过滤，可改用methods：

methods:{
  filterByEggType(type){
    const { egg, baby } = this.digilist[0];
    const targetEgg = egg.find(item => item.eggtype === type);
    if(!targetEgg) return [];
    return baby.filter(digi => digi.preDigivolution.includes(targetEgg.id));
  }
}

模板调用：

<p v-for="digi in filterByEggType('blue')" :key="digi.id">{{ digi.name }}</p>

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