javascript - 带有 v-if 的自定义模板在使用 li 项目时出错 - vue js

Question

我必须在导航栏中显示菜单。有多个菜单项（主页、关于等）。一些菜单项有子菜单（第 2 -3 级）。因此，我创建了一个指令来显示子菜单，同时将鼠标悬停在导航栏中的菜单上。

这是我的代码（旧代码） - v-show-sub-menu 是指令

<ul class="main__menus">
            <li v-show-sub-menu v-if="m.displayMenu==='Y'" v-for="(m, idx) in Menus" class="main__menu" :key="idx"
                :class="{'main__menu--selected':chkMenu(m)}" @click="screen.moveMenu(m)">
                <div class="main__menu-name">{{getMenuName(m)}}</div>
                <ul class="main__menu__second" v-show="!hideSubMenu" :class="secondMenuClasses(m)" @click.stop> 
                   // 2nd - 3rd level menu 
                </ul>
            </li>
        </ul>

它工作正常，但根据 vue 标准，我重构了代码并在同一 li 标签中从 v-for 中删除了 v-if。我使用自定义模板语法来检查菜单是否会显示在导航栏中，或者不会像下面这样。

<ul class="main__menus">
            <li v-for="(m, idx) in Menus"
                :key="idx"
                v-show-menu
                class="main__menu"
                :class="{'main__menu--selected':chkMenu(m)}"
                @click="screen.moveMenu(m)"
            >
                <template v-if="m.displayMenu ==='Y'">
                    <div class="main__menu-name">
                        {{ getMenuName(m) }}
                    </div>
                    <ul v-show="!hideSubMenu" class="main__menu__second" :class="secondMenuClasses(m)" @click.stop>
                        // 2nd - 3rd level children
                    </ul>
                </template>
            </li>
        </ul>

指示

showSubMenu: {  // It is showing sub menus while hovering over menus in navigation bar
        inserted(el) {
            const menu = el.querySelector('.main__menu__second');

            el.addEventListener('mouseenter', () => {
                const { left, height } = el.getBoundingClientRect();
                if (document.querySelector('#menu-area')) {
                    document.querySelector('#menu-area').appendChild(menu);
                }
                menu.style.display = 'block';
                menu.style.top = `${height}px`;
                menu.style.left = `${left}px`;
            });
            menu.addEventListener('mouseenter', () => {
                const { left, height } = el.getBoundingClientRect();
                menu.style.display = 'block';
                menu.style.top = `${height}px`;
                menu.style.left = `${left}px`;
            });
            el.addEventListener('mouseleave', () => {
                menu.style.display = 'none';
            });
            menu.addEventListener('mouseleave', () => {
                menu.style.display = 'none';
            });
        }
    }

但是，它打破了一些地方，指令给出了空错误，并且还有可见的 css 问题。我正在使用计算属性来解决这个问题。

如何解决这个问题以及为什么它的行为很奇怪？

标签： javascriptcssvue.js