Vue implementiert rekursiv ein dreistufiges Menü

<Vorlage>
    <div Klasse="Menüebene-Menü Menüebene-Menü-Eingabe" v-if="showLevelMenu">
      <Menüelement Klasse="Menüelement" :menuDate="Menüliste"></Menüelement>
    </div>
</Vorlage>

<Vorlage>
  <div>
    <div Klasse="" v-for="(Menü, Index) in MenüDatum" :Schlüssel="Index">
    // Jedes Menüelement <div class="menu-row" @click="menuSpread(menu)"
           :Klasse="[{'menu-row-selected': menu.selected && menu.children.length <= 0}]">
        <div Klasse="Menüzeile links">
          <div Klasse = "Menüzeile-links-Linie" :Klasse = "[{'Menü-ausgewählt': Menü.ausgewählt && Menü.Kinder.Länge <= 0}]"></div>
          <i class="iconfont" :class="[menu.menuIcon, {'color-icon': showIconColor(menu)}]"></i>
        </div>
        <div Klasse="Menüzeile rechts">
          <span :class="[{'font-16': menu.level === '0'}]">{{menu.menuName}}</span>
          <i class="c" v-if="menu.children.length <= 0"></i>
          <i class="iconfont icon-liebiaoxiala" v-if="menu.children.length>0 && !menu.selected"></i>
          <i class="iconfont icon-liebiaoshouqi" v-if="menu.children.length>0 && menu.selected"></i>
        </div>
      </div>
      // Menü rekursiv anzeigen <menu-item v-show="menu.selected" v-if="menu.children.length>0" :menuDate="menu.children"></menu-item>
    </div>
  </div>
</Vorlage>
<Skript>
  Standard exportieren {
    Requisiten: {
      MenüDatum: Array
    },
    Name: 'Menüelement',
    Methoden: {
      menuSpread (Menü) {
        wenn (menu.menuRouter) dies.$router.push(menu.menuRouter);
        Menü.ausgewählt = !Menü.ausgewählt;
        dies.rekursion(dieses.menuDate, menü);
      },
      Rekursion (alle, temp) {
        alle.fürJedes(Element => {
          wenn (item.menüname !== temp.menüname) {
            Element.ausgewählt = falsch;
            dies.rekursion(item.children, temp);
          }
        });
      },
      showIconColor (Menü) {
        lass zeigen = falsch;
        wenn (Menüebene === '0') {
          menu.children.forEach(item => {
            wenn (Artikel.Kinder.Länge <= 0 && Artikel.ausgewählt) {
              zeigen = wahr;
            }
            wenn (Element.Kinder.Länge > 0) {
              item.children.forEach(item => {
                wenn (Element.ausgewählt) {
                  zeigen = wahr;
                }
              });
            }
          });
        }
        Rückgabeshow;
      }
    }
  };
</Skript>