在使用element-ui的導航元件時遇到的bug，elmenu.items的key值不對的問題

如果我們在頁面佈局的時候使用的是這樣的佈局，主菜單向子選單傳遞的時候，element頁面渲染沒有問題，當加上process這種tab標籤，並且點選這個tab標籤相應的子選單要啟用，這個bug就來了。

原因是elment元件在設定items的時候莫名其妙的更新錯了，保留了之前的key值，items裡面的這個key值是用元件上繫結的index值設定的，啟用態activeIndex也和這個key有關。

這時候只能自己手動改過來。

1.先給這個el-menu一個ref

<div class="whr-side-menu">
				<el-menu
					ref="aside_menu"
					class="el-menu-vertical-demo"
					:default-active="$route.path"
				>
					<menutree :menu="somenu"></menutree>
				</el-menu>
			</div>
 

2.點選主選單的時候，把子選單（children）傳遞給側邊欄子選單。

1.somenu就是這個傳遞的值，講道理的話，應該到此就完事了。誰也想不到會產生那個莫名其妙的bug。

2.把正確的key值手動付給items，就是下面的程式碼，用這個$set()我註釋的那一段也可以，不過沒必要，因為activeIndex依然不會變（之後會講到）。

toSideMenu(children) {
			let that = this;
			this.somenu = children;
			let keymap = new Map();
			setTimeout(function () {
				for (let iterator in that.$refs.aside_menu.items) {
					keymap.set(
						iterator,
						that.$refs.aside_menu.items[iterator].index
					);
					// that.$set(
					// 	that.$refs.aside_menu.items,
					// 	keymap.get(iterator),
					// 	that.$refs.aside_menu.items[iterator]
					// );
					that.$refs.aside_menu.items[keymap.get(iterator)] =
						that.$refs.aside_menu.items[iterator];
					delete that.$refs.aside_menu.items[iterator];
				}
			}, 200);
		},
 

3.手動給activeIndex賦值，改變側邊欄導航的啟用態

PubSub.subscribe("setAciveIndex", (msg, item) => {
			that.$set(that.$refs.aside_menu, "activeIndex", item);
		});

item就是對應的路由

好了，這樣就解決了。這個bug我解決了好久，開始以為自己傳值有問題，可是這麼簡單點事能出什麼問題呢？

不過後面我要講的，手動渲染遞迴導航選單可以避開的這個問題。

後面講vue element-ui 導航選單的遞迴渲染。