[Vuejs]-Vue.js3: how to filter through nested arrays

by

0👍

✅

First of all, you can’t pass params to a computed property. There are ways but then the computed lost its reactivity. If you want to work with params, use a function instead. Read more here.

Second thing, a computed is used like a property, not a function, so use filterEgg instead of filterEgg().

Last and important, you don’t need to pass anything at all. You already have access to the digilist property using this instance then why pass it again?

Here is the working demo-

<!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>

Leave a comment