Vueは3階層メニューを再帰的に実装する

<テンプレート>
    <div class="メニューレベルメニューメニューレベルメニュー-enter" v-if="showLevelMenu">
      <menu-item class="menu-item" :menuDate="メニューリスト"></menu-item>
    </div>
</テンプレート>

<テンプレート>
  <div>
    <div class="" v-for="(menu, index) in menuDate" :key="index">
    // 各メニュー項目 <div class="menu-row" @click="menuSpread(menu)"
           :class="[{'menu-row-selected': menu.selected && menu.children.length <= 0}]">
        <div class="menu-row-left">
          <div class="menu-row-left-line" :class="[{'menu-selected': menu.selected && menu.children.length <= 0}]"></div>
          <i class="iconfont" :class="[menu.menuIcon, {'color-icon': showIconColor(menu)}]"></i>
        </div>
        <div class="menu-row-right">
          <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>
      // メニューを再帰的に表示します <menu-item v-show="menu.selected" v-if="menu.children.length>0" :menuDate="menu.children"></menu-item>
    </div>
  </div>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    小道具: {
      menuDate: 配列
    },
    名前: 'メニュー項目',
    メソッド: {
      menuSpread (メニュー) {
        menu.menuRouter の場合、 this.$router.push(menu.menuRouter);
        メニューが選択されました = !メニューが選択されました;
        this.recursion(this.menuDate、メニュー);
      },
      再帰（すべて、一時）{
        all.forEach(アイテム => {
          if (item.menuName !== temp.menuName) {
            項目が選択されました = false;
            this.recursion(item.children, temp);
          }
        });
      },
      showIconColor (メニュー) {
        show = false とします。
        メニューレベル === '0' の場合 {
          menu.children.forEach(item => {
            if (item.children.length <= 0 && item.selected) {
              表示 = true;
            }
            （アイテムの子供の長さ＞0）の場合{
              アイテム.children.forEach(アイテム => {
                （項目が選択されている場合）{
                  表示 = true;
                }
              });
            }
          });
        }
        リターンショー;
      }
    }
  };
</スクリプト>