feat(Menu): rerender activeIndex when menus changed, fixed #9092

pull/9118/head
qingwei.li 2018-01-02 18:47:45 +08:00 committed by 杨奕
parent 11d2263678
commit 63fed345e5
2 changed files with 46 additions and 9 deletions

View File

@ -130,26 +130,29 @@
} }
}, },
watch: { watch: {
defaultActive(value) { defaultActive: 'updateActiveIndex',
const item = this.items[value];
if (item) {
this.activeIndex = item.index;
this.initOpenedMenu();
} else {
this.activeIndex = '';
}
},
defaultOpeneds(value) { defaultOpeneds(value) {
if (!this.collapse) { if (!this.collapse) {
this.openedMenus = value; this.openedMenus = value;
} }
}, },
collapse(value) { collapse(value) {
if (value) this.openedMenus = []; if (value) this.openedMenus = [];
} }
}, },
methods: { methods: {
updateActiveIndex() {
const item = this.items[this.defaultActive];
if (item) {
this.activeIndex = item.index;
this.initOpenedMenu();
} else {
this.activeIndex = null;
}
},
getMigratingConfig() { getMigratingConfig() {
return { return {
props: { props: {
@ -287,6 +290,7 @@
if (this.mode === 'horizontal') { if (this.mode === 'horizontal') {
new Menubar(this.$el); // eslint-disable-line new Menubar(this.$el); // eslint-disable-line
} }
this.$watch('items', this.updateActiveIndex);
} }
}; };
</script> </script>

View File

@ -329,4 +329,37 @@ describe('Menu', () => {
}, true); }, true);
expect(vm.$refs.group1.$el.querySelector('.el-menu-item-group__title').innerText).to.be.equal('分组一'); expect(vm.$refs.group1.$el.querySelector('.el-menu-item-group__title').innerText).to.be.equal('分组一');
}); });
it('dynamic menus, issue 9092', done => {
vm = createVue({
template: `
<el-menu :default-active="active">
<el-menu-item
v-ref="menus"
v-for="menu in menus"
:index="menu.name"
:key="menu.name">
{{menu.description}}
</el-menu-item>
</el-menu>
`,
data() {
return {
active: '',
menus: []
};
}
}, true);
setTimeout(_ => {
vm.active = '2';
vm.menus = [
{name: '1', description: 'happy'},
{name: '2', description: 'new'},
{name: '3', description: 'year'}
];
setTimeout(_ => {
expect(vm.$el.querySelector('.el-menu-item.is-active').innerText).to.equal('new');
done();
}, 20);
}, 100);
});
}); });