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

packages/menu/src/menu.vue

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

test/unit/specs/menu.spec.js

@@ -329,4 +329,37 @@ describe('Menu', () => {
     }, true);
     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);
+  });
 });