Vue.js (ElementUI) переполнение стека вызовов

Доброго времени суток.

Использую element-ui в связке с Vue. Проблема возникла с Menu Collapse.

Пример выпадающего меню:

<el-menu default-active="2" class="el-menu-vertical-demo">

 /******блок меню******/
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">Navigator One</span>
    </template>

     /******Сами выпадающие элементы *******/
     <el-menu-item index="1-1">item one</el-menu-item>
     <el-menu-item index="1-2">item two</el-menu-item>


</el-menu>

Поскольку элементов меню может быть много, решил вынести всё в отдельный миксин.

export default function (menuItems = []) {
    let list = {};

    menuItems.forEach(el => {
        list[el] = () => import(`./menu/items/${el[0].toUpperCase() + el.slice(1)}`)
    });

    return {
        components: {
            ...list
        },
        data () {
            return {
                components: menuItems
            }
        }
    }
}

Подключение элементов меню в компоненте:

<template>
    /******* сам компонент меню ***********************/
    <el-menu default-active="2" class="nav-bar"
             :collapse="isCollapse"
             background-color="#3C4B64"
             text-color="#FFFFFF"
             :router="true"
             active-text-color="#409EFF">

       /********* подключение блоков меню, (components <- смотрите миксин) ********/
        <component
                v-for="comp of components"
                :key="'component-'+comp"
                :is="comp"
        >
        </component>


       /*********** блок меню для теста ТЕСТ********************/
        <el-submenu index="/test">
            <template slot="title">
                <i class="el-icon-s-grid"></i>
                <span slot="title">Курси</span>
            </template>
            <el-menu-item-group>
                <span slot="title">Всі курси</span>
                <el-menu-item index="/1">Мої</el-menu-item>
                <el-menu-item index="/2">Всі</el-menu-item>
            </el-menu-item-group>
        </el-submenu>

    </el-menu>
</template>

<script>
    import mixin from "./NavBarMixin";

    /** обычный массив со списком блоков меню *****/
    import student from "./menu/student";


    export default {
        name: "NavBar",
        data () {
            return {
                isCollapse: false,
            }
        },
        mixins: [
            mixin(student)
        ]

    }
</script>

Когда меню свёрнуто, то при наведении на выпадающий блок происходит переполнение стека вызовов Uncaught RangeError: Maximum call stack size exceeded..

Отладка показала следующее. Плодятся четыре вызова:

original._wrapper (vue.runtime.esm.js?2b0e:6917)
handleMouseenter (element-ui.common.js?5c96:3687)
invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
invoker (vue.runtime.esm.js?2b0e:2179)

original._wrapper (vue.runtime.esm.js?2b0e:6917)
handleMouseenter (element-ui.common.js?5c96:3687)
invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
invoker (vue.runtime.esm.js?2b0e:2179)

original._wrapper (vue.runtime.esm.js?2b0e:6917)
handleMouseenter (element-ui.common.js?5c96:3687)
invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
invoker (vue.runtime.esm.js?2b0e:2179)

Но, если использовать выпадающий блок в тупую (в комментариях обозначен как тест), то всё нормально.

P.S. Переполнение стека так же происходит при отрисовке компонентов меню (прим. <Dahboard />) без миксина.

В чем может быть проблема? Благодарен за любую помощь!


Ответы (0 шт):