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 />) без миксина.
В чем может быть проблема? Благодарен за любую помощь!