VueJS- Display multiple nested properties in objects

Question

I have a multi-level navigation component in VueJS. I can retrieve and display the first 2 levels but I also need the nested property called name of the children array to be displayed. How can I get this nested property to print out in my for loop?

Here is my code:

<template>
 
        <div class="navigation__main-menu-wrapper">
          <ul>
            <li
              v-for="(item, index) in navItems"
              :key="index">
              <div class="navigation__main-menu-list-link">
                <a class="mainnav-anchor"
                :href="item.url">{{ item.name }}</a>
              </div>
              <ul
                class="navigation__submenu">
                  <li
                    v-for="(subItem, index) in item.items"
                    :key="index">
                    <a
                      :href="subItem.url"
                      :title="subItem.name">
                      <div>
                        <span>{{subItem.name}}</span>
                      </div>
                       <div
                       v-for="(subItemChild, index) in items.children"
                       :key="index">
                        <span class="navigation__submenu-name">{{subItemChild.name}}</span>
                      </div>
                    </a>
                  </li>
              </ul>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  data: function () {
    return {
      navItems: []
    };
  },
  mounted: function () {
    this.onLoadMainNavigation();
  },
  methods: {
    onLoadMainNavigation: function () {
      this.$helpers
        .getApiCall("/api/", {
          type: "mainnavigation",
        })
        .then((response) => {
          const items = [];

          Object.values(response.data.data).forEach((item) => {
            const subItems = [];

            //Check if there is a submenu
            if (item.subMainNavigation) {
              item.subMainNavigation.forEach((subItem, subItemChild) => {
                subItems.push({
                  name: subItem.name,
                  class: subItem.class,
                  children: [{
                    name: subItemChild.name
                  }]
                });
              });
            } 
            items.push({
              name: item.name,
              url: item.url,
              items: subItems
            });
          });
          this.navItems = items;
        })
    }
  }
};
</script>

This is an exmplae of the data that is outputted

[
   {
      "name":"Charging solutions"
      "items":[
         {
            "name":"By industry",
            "class":"by-industry",
            "children":[
               {
                  "id":6671,
                  "name":"Workplaces",
                  "class":"workplaces"
               },
               {
                  "id":6672,
                  "name":"Retail & hospitality",
                  "class":"retail"
               },
               {
                  "id":6673,
                  "name":"Commercial parking",
                  "class":"parking"
               },
               {
                  "id":6674,
                  "name":"Fuel retailers",
                  "class":"fuel"
               },
            ]
         },
         {
            "name":"Products",
            "class":"products",
            "children":[
               {
                  "id":204,
                  "name":"Public chargers",
                  "class":"public"
               },
               {
                  "id":206,
                  "name":"Accessories",
                  "class":"accessories"
               },
               {
                  "id":4889,
                  "name":"Smart charging",
                  "class":"smart"
               }
            ]
         }
      ]
   }
]

Boussadjra Brahim · Accepted Answer · 2021-08-22 07:55:52Z

0

Just replace items.children by subItem.children in the last nested loop :

  <div  v-for="(subItemChild, _index) in subItem.children"  :key="_index">
      <span class="navigation__submenu-name">{{subItemChild.name}}</span>
  </div>

answered Aug 22, 2021 at 7:55

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

madameFerry Over a year ago

I tried that Boussadjra but its says that name is undefined ... Any ideas why?

madameFerry · Accepted Answer · 2021-08-24 18:10:02Z

0

I eventually solved this by simply doing

subItems.push(subItem);

answered Aug 24, 2021 at 18:10

madameFerry

2291 gold badge6 silver badges22 bronze badges

Collectives™ on Stack Overflow

VueJS- Display multiple nested properties in objects

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related