iview 酸爽debug: subMenu預設選中無效的解決方法

一. 在iview中寫一個submenu

        <Col span="3" type="flex" v-if="showCids">
          <Menu
            ref="menus"
            theme="light"
            active-name="0"
            @on-select="selectMenu"
            width="auto"
          >
            <MenuGroup title="cid">
              <MenuItem v-for="(cid, index) in cids" :key="index" :name="index">
                {{ cid }}
              </MenuItem>
            </MenuGroup>
          </Menu>
        </Col>

因為這個subMenu是動態生成的, 他的name我設定為動態生成過程中的index, 所以第一個subMenu的name是0.
根據上述設定, 參考官網的說明,使用activeName="0"來表示啟用的name, 還特別注意力name是string而不是int基本資料型別. 所以就通過這種方式讓subMenu0呈現啟用態. 很好, 並不work下面是高能的踩坑過程, 如果不想看可以直接跳轉 "三. 解決方法"

二. 踩坑全過程

根據網上的資料, 我迅速的發現瞭解決問題的路徑. "因為subMenu是動態展開的"--->所以需要呼叫updateActiveName()方法, 在subMenu的資料填充之後進行呼叫. 然後我就根據網上的教學和iview官網的描述吭呲吭呲學了半個多小時. 因為在呼叫這個函數的時候我碰到了很多問題. 最重要的問題就是我根本找不到這個函數的呼叫入口, 說人話就是誰來呼叫這個函數. 教學上說是this.$refs.menu.updateActiveName(). 這行話含義就深了, 作為前端菜鳥根本把握不住. 首先refs是社麼? 其次menu又是什麼? 最後this.$nextTick() 為社麼在這個函數裡沒有出現? 當然更新的新手會問this.$nextTick()是什麼, 他為什麼要在這裡出現.
所以這個問題遞迴的層數真的夠多的, 有多多呢? 看圖吧.