Блог

У меня есть многоуровневый навигационный компонент в VueJS. Я могу извлечь и отобразить первые 2 уровня, но мне также нужно, чтобы отображалось вложенное свойство, называемое именем дочернего массива. Как я могу распечатать это вложенное свойство в цикле for?

Вот мой код:

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

Это пример данных, которые выводятся

 [
   {
      "name":"Charging solutions"
      "items":[
         {
            "name":"By industry",
            "class":"by-industry",
            "children":[
               {
                  "id":6671,
                  "name":"Workplaces",
                  "class":"workplaces"
               },
               {
                  "id":6672,
                  "name":"Retail amp; 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"
               }
            ]
         }
      ]
   }
]
 

Просто замените items.children на subItem.children в последнем вложенном цикле :

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

В конце концов я решил эту проблему, просто сделав

 subItems.push(subItem);