如何将属性从孙子菜单对象传递给祖父母？

由 发布于 vue.jsvuetify.js
 收藏

我的老板决定用另一个子页面扩展菜单栏，以前完全可以正常工作的内容（一个简单的子菜单）现在不想工作，因为它在另一个子菜单下有一个子菜单。 这是图片：

enter image description here

As you can see when I hover "Acts" the sub menu with External and Internal documents works perfectly fine enter image description here

但是，当我想将光标移到带有“导演命令”的另一个子菜单上时，整个菜单都隐藏了。我认为这是因为第二个子菜单（孙子）没有将信息传递给主菜单元素（祖父母）来保持菜单处于活动状态，但是我不知道如何解决此问题。 这是代码：

<v-menu open-on-hover bottom offset-x transition="slide-x-transition">
      <template v-slot:activator="{ on }">
      <v-list-item link v-on="on">
        <v-list-item-content>
          <v-list-item-title class="subtitle-1">Acts <v-icon class="menu-icon">keyboard_arrow_right</v-icon></v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      </template>
          <v-list color="#F0FAFE">
            <router-link to="/External"><v-list-item link>
              <v-list-item-content>
                <v-list-item-title class="subtitle-1 font-weight-medium">External</v-list-item-title>
              </v-list-item-content>
            </v-list-item></router-link>
            <v-menu open-on-hover bottom offset-x transition="slide-x-transition">
            <template v-slot:activator="{ on }">
            <v-list-item link v-on="on">
              <v-list-item-content>
                <v-list-item-title class="subtitle-1 font-weight-medium">Internal <v-icon class="menu-icon">keyboard_arrow_right</v-icon></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            </template>
              <v-list color="#F0FAFE">
                <v-menu open-on-hover bottom offset-x transition="slide-x-transition">
                <template v-slot:activator="{ on }">
                  <v-list-item link v-on="on">
                  <v-list-item-content>
                    <v-list-item-title class="subtitle-1 font-weight-medium">Director's Orders <v-icon class="menu-icon">keyboard_arrow_right</v-icon></v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
                </template>
                  <v-list
                  color="#F0FAFE"
                  v-for="(item, index) in Orders"
                  :key="index"
                  >
                    <router-link :to="'/' + item.title"><v-list-item link>
                      <v-list-item-content>
                        <v-list-item-title class="subtitle-1 font-weight-medium">{{ item.title }}</v-list-item-title>
                      </v-list-item-content>
                    </v-list-item></router-link>
                  </v-list>
                </v-menu>
                <router-link to="/Other"><v-list-item link>
                  <v-list-item-content>
                    <v-list-item-title class="subtitle-1 font-weight-medium">Other</v-list-item-title>
                  </v-list-item-content>
                </v-list-item></router-link>
              </v-list>
            </v-menu>
          </v-list>
      </v-menu>

还有一点免责声明。是的，我知道这种类型的菜单不是“材料设计”菜单，这是vuetify的基础

评论