javascript Vue.js3:如何过滤嵌套数组

ldioqlga  于 2023-01-01  发布在  Java
关注(0)|答案(1)|浏览(212)

我正在尝试过滤一个数组,而主数组中有其他数组。
我使用了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

o2gm4chl

o2gm4chl1#

**首先,**你不能将参数传递给计算属性。有很多方法,但是计算属性失去了它的React性。如果你想使用参数,使用函数代替。在这里阅读更多。
**第二件事,**一个计算的像一个属性,而不是一个函数,所以使用filterEgg代替filterEgg()
最后也是最重要的一点,您根本不需要传递任何东西。您已经使用this示例访问了digilist属性,那么为什么还要再次传递它呢?

这是演示版-

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"
      rel="stylesheet"
      />
    <link
      href="https://cdn.jsdelivr.net/npm/vuetify@3.0.5/dist/vuetify.min.css"
      rel="stylesheet"
      />
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.5/dist/vuetify.min.js"></script>
    <script type="text/x-template" id="app-template">
      <v-app>
        <p v-for="egg in filteredEgg">{{ egg }}</p>
      </v-app>
    </script>
    <script>
      const { createApp } = Vue;
      const { createVuetify } = Vuetify;
      
      const vuetify = createVuetify();
      
      const app = createApp({
        template: "#app-template",
        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",
                },
              ],
            }, ],
          };
        },
        computed: {
          filteredEgg() {
            return this.digilist[0].egg.map((egg) => {
              return egg.eggtype;
            });
          },
        },
      })
        .use(vuetify)
        .mount("#app");
    </script>
  </body>
</html>

相关问题