<div id="body">
<div>{{now}}</div>
<el-menu :default-openeds="["1"]">
<el-submenu index="1">
<template slot="title"><i class="el-icon-menu"></i></template>
<el-menu-item>option-1</el-menu-item>
<el-menu-item-group title="option-1-1">
<el-menu-item>option-1-1-1</el-menu-item>
<el-menu-item>option-1-1-2</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i></template>
<el-menu-item>option-2</el-menu-item>
<el-menu-item-group title="option-2-1">
<el-menu-item>option-2-1-1</el-menu-item>
<el-menu-item>option-2-1-2</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</div>
<script src="/scripts/vue.min.js"></script>
<script src="/element-ui-2.3.7/lib/index.js"></script>
<link rel="stylesheet" href="/element-ui-2.3.7/lib/theme-chalk/index.css" crossorigin="anonymous">
<script type="text/javascript">
var page = new Vue({
el : "-sharpbody",
data : {
now : "",
},
mounted : function () {
this.get_date();
},
methods : {
get_date : function() {
this.$set(this, "now", new Date().toLocaleString(undefined, {hour12:false}));
setTimeout(() => {
this.get_date();
}, 1000);
},
},
});
</script>
The code is shown in the figure, and the vue version is 2.5.16 Magi element version as shown in the figure.
The page is displayed as
el-menu turns on option-1, and closes option-2 by default using default-openeds.
but there is a problem:
after clicking option-1 to close, time refresh will make option-1 automatically expand,
after clicking option-2 to open, time refresh will make option-2 automatically close.
at first glance, it seems that the default-openeds-related configuration has been refreshed when the display is refreshed after changing the now after using vue setTimeout.
how to solve this problem?
question add:
<div id="body">
<div>{{now}}</div><el-button @click="get_date()"></el-button>
<el-menu :default-openeds="["1"]">
<el-submenu index="1">
<template slot="title"><i class="el-icon-menu"></i></template>
<el-menu-item>option-1</el-menu-item>
<el-menu-item-group title="option-1-1">
<el-menu-item>option-1-1-1</el-menu-item>
<el-menu-item>option-1-1-2</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i></template>
<el-menu-item>option-2</el-menu-item>
<el-menu-item-group title="option-2-1">
<el-menu-item>option-2-1-1</el-menu-item>
<el-menu-item>option-2-1-2</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</div>
<script src="/scripts/vue.min.js"></script>
<script src="/element-ui-2.3.7/lib/index.js"></script>
<link rel="stylesheet" href="/element-ui-2.3.7/lib/theme-chalk/index.css" crossorigin="anonymous">
<script type="text/javascript">
var page = new Vue({
el : "-sharpbody",
data : {
now : "",
},
mounted : function () {
this.get_date();
},
methods : {
get_date : function() {
this.$set(this, "now", new Date().toLocaleString(undefined, {hour12:false}));
},
},
});
</script>
Changing the button refresh time to will also trigger this problem.
above.