vue3.2でマルチレベルのDropdown menu

あるようで見つからないので作りました。

• CSSはBootstrapを利用しています

template

<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">サイト名</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item" v-for="level1Menu in showMenu" :key="level1Menu.name">
          <a class="nav-link " href="#" role="button" @click="level1Toggle(level1Menu)">
            {{level1Menu.name}}
          </a>
          <ul class="dropdown-menu" style="display: block;" v-show="level1Menu.show_menu">
            <li v-for="item in level1Menu.menu" :key="item.name">
              
              <router-link :to="item.to" class="dropdown-item" @click="toggle(item)">{{item.name }}</router-link>
              <ul v-show="item.showChildren">
                <li v-for="child in item.children" :key="child.name">
                  <router-link :to="child.to" class="dropdown-item" @click="toggle(child)">{{child.name }}</router-link>
                  <ul v-show="child.showChildren">
                    <li v-for="grandchild in child.children" :key="grandchild.name">
                      {{ grandchild.name }}
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
</template>

script

<script setup>
import { ref } from 'vue'

const level1Toggle=(target)=>{
  const prevState = target.show_menu
  resetAll()
  //prevState : true->falseの場合は処理しない
  if(!prevState)
    target.show_menu = !target.show_menu
}

const resetAll =()=>{

  Object.keys(showMenu.value).forEach(i=>{
    
    showMenu.value[i].show_menu = false
  })
}


const menuItem1 = ref([
  { name: "子メニュー１",showChildren: false,to:"/abc",},
  { name: "子メニュー２", showChildren: false ,to:"/def",},
  { name: "子メニュー３", showChildren: false ,to:"/ghi",}
])

const menuItem2 = ref([
  { name: "子メニュー４", showChildren: false,to:"/aaaa" },
  {
    name: "子メニュー５",
    showChildren: false,
    to:"/",
    children: [
      {name: "孫メニュー１",showChildren: false,to:"/a"},
      {name: "孫メニュー２",showChildren: false,to:"/b"},
      {name: "孫メニュー３",showChildren: false,to:"/c"},
    ]
  },
  { name: "子メニュー６", showChildren: false,to:"/" },
  { name: "子メニュー７", showChildren: false,to:"/",children: [
      {name: "孫メニュー４",showChildren: false,to:"/"},
      {name: "孫メニュー５",showChildren: false,to:"/"},
    ]
   },
   { name: "子メニュー８", showChildren: false,to:"/aaaa" },

  ])


const menuItem3 = ref([

   { name: "子メニュー９", showChildren: false,to:"/b" },
   { name: "子メニュー１０", showChildren: false,to:"/c" },

])

const menuItem4 = ref([
   { name: "子メニュー１１", showChildren: false,to:"/d" },
])

const showMenu = ref([
  
  {name:"メニュー１",menu:menuItem1,show_menu:false},
  {name:"メニュー２",menu:menuItem2,show_menu:false},
  {name:"メニュー３",menu:menuItem3,show_menu:false},
  {name:"メニュー４",menu:menuItem4,show_menu:false},
 
])
const toggle = (item) => {
  item.showChildren = !item.showChildren
}
</script>

最後

一応コピーでも動くはずです。さらに孫メニューのデータにchildrenを増やせば曽孫メニューも出せます。

Vue.jsは使い始めて数ヶ月のため、書き方的に正しくないかもしれませんので、気になる箇所があれば、ぜひともご指摘いただければ幸いです。
現段階は「動く」を優先にしています