我正在尝试过滤一个数组,而主数组中有其他数组。
我使用了computed
并创建了一个名为filteredEgg()
的函数,我不确定我遗漏了什么,我正在返回主数组并过滤数组中的egg
,然后创建一个短函数以返回egg
数组的name
超文本标记语言
<p v-for="egg in filterEgg(digilist)">{{ egg }}</p>
JS系统
const app = Vue.createApp({
data(){
return{
digilist:[{
egg:[
{
id:"blue",
eggtype:"blue",
name:"Punimon",
},
{
id:"green",
eggtype:"green",
name:"Botamon",
},
{
id:"orange",
eggtype:"orange",
name:"Poyomon",
},
{
id:"pink",
eggtype:"pink",
name:"Yuramon",
},
],
baby:[
{
id:"botamon",
name:"Botamon",
stage:"Baby",
type:"Data",
preDigivolution:["green"],
digivolution:["Koromon"],
image: "https://www.grindosaur.com/img/games/digimon-world/digimon/12-botamon.jpg"
},
{
id:"poyomon",
name:"Poyomon",
stage:"Baby",
type:"Data",
preDigivolution:["orange"],
digivolution:["tokomon"],
image: "https://www.grindosaur.com/img/games/digimon-world/digimon/86-poyomon.jpg"
},
{
id:"punimon",
name:"Punimon",
stage:"Baby",
type:"Data",
preDigivolution:["blue"],
digivolution:["tsunomon"],
image: "https://www.grindosaur.com/img/games/digimon-world/digimon/88-punimon.jpg"
},
{
id:"yuramon",
name:"Yuramon",
stage:"Baby",
type:"Data",
preDigivolution:["pink"],
digivolution:["tanemon"],
image: "https://www.grindosaur.com/img/games/digimon-world/digimon/123-yuramon.jpg"
},
],
}]
}
},
computed:{
filteredEgg(digilist){
return this.digilist.filter((egg) => {
return egg.name
})
}
},
})
我已经附上了一个截图,我正在努力实现,每个生物都有一个进化阶段,过滤功能是过滤所有的进化,匹配到某些生物的例子eggtype:"blue"
是linekd到name:"Punimon",
这只是一个简单的解释,因为有一堆的进化,我想过滤到达鸡蛋,链接到每个数字进化。
我创建的数据库太大,无法在此添加,但您可以通过以下链接查看它-https://github.com/SheldonAldridge/Digimon-world-divivolution-guides/blob/main/js/Database/digimon-digivolution-database.js
1条答案
按热度按时间o2gm4chl1#
**首先,**你不能将参数传递给计算属性。有很多方法,但是计算属性失去了它的React性。如果你想使用参数,使用函数代替。在这里阅读更多。
**第二件事,**一个计算的像一个属性,而不是一个函数,所以使用
filterEgg
代替filterEgg()
。最后也是最重要的一点,您根本不需要传递任何东西。您已经使用
this
示例访问了digilist
属性,那么为什么还要再次传递它呢?这是演示版-