Javascript 如何将mouseenter与元素ui一起使用

我试图在鼠标事件时折叠垂直菜单，但它不能正常工作

有什么想法吗

var Main={
数据（）{
返回{
isCollapse：对
};
},
方法：{
开关崩溃（）{
this.isCollapse=！this.isCollapse；
}
}
}
变量向量=Vue.extend（主）
新Ctor（）.$mount（'#app'）

@import url（“//unpkg.com/element-ui@2.9.2/lib/theme chalk/index.css）；
.el菜单垂直演示：非（.el菜单--折叠）{
宽度：200px；
最小高度：400px；
}

领航员一号
第一组
项目一
项目二
项目三
项目四
项目一
领航员二号
航海家三号
航海家四号

我将使用两种不同的鼠标事件：

mouseenter

和

mouseleave

var Main={
数据（）{
返回{
isCollapse：对
};
},
方法：{
removeCollapse（）{
this.isCollapse=false；
},
崩溃（）{
this.isCollapse=true；
},
}
}
变量向量=Vue.extend（主）
新Ctor（）.$mount（'#app'）

@import url（“//unpkg.com/element-ui@2.9.2/lib/theme chalk/index.css）；
.el菜单垂直演示：非（.el菜单--折叠）{
宽度：200px；
最小高度：400px；
}

领航员一号
第一组
项目一
项目二
项目三
项目四
项目一
领航员二号
航海家三号
航海家四号