ant?菜單組件報(bào)錯(cuò)Cannot?read?property?‘isRootMenu‘?of?undefined
更新時(shí)間：2023年08月21日 10:15:08 作者：柯柯的呵呵噠
這篇文章主要介紹了ant?菜單組件報(bào)錯(cuò)Cannot?read?property?‘isRootMenu‘?of?undefined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
ant design of vue插件中的菜單使用
我們在使用 ant design of vue插件中的菜單時(shí)，使用組件會報(bào)錯(cuò)。原因是ant 推薦使用函數(shù)組件，如果，使用傳統(tǒng)的組件，就會報(bào)錯(cuò)。
Before v2.0, 因組件內(nèi)部會動態(tài)更改a-sub-menu的屬性，如果拆分成單文件，無法將屬性掛載到a-sub-menu上，你需要自行聲明屬性并掛載。為了方便，避免屬性的聲明，我們推薦使用函數(shù)式組件。
父組件代碼
<a-menu
:default-selected-keys="['first']"
:default-open-keys="['first']"
mode="inline"
theme="light"
style="height: calc(100vh - 96px)"
:inline-collapsed="collapsed"
>
<a-menu-item key="first">
<router-link to="/">
<a-icon type="home" />
<span>首頁</span>
</router-link>
</a-menu-item>
<template v-for="(item, index) in data">
<a-menu-item :key="index" v-if="!item.children">
<router-link :to="item.path">
<a-icon :type="item.icon" />
<span>{{item.name}}</span>
</router-link>
</a-menu-item>
<sub-menu v-else :key="index" :data="item" :index="index"/>
</template>
</a-menu>函數(shù)組件代碼
<template functional>
<a-sub-menu :key="props.index">
<span slot="title">
<a-icon :type="props.data.icon" />
<span>{{props.data.name}}</span>
</span>
<template v-for="(item, index) in props.data.children">
<a-menu-item :key="props.index + '-' + index" v-if="!item.children">
<router-link :to="item.path">
<a-icon :type="item.icon" />
<span>{{item.name}}</span>
</router-link>
</a-menu-item>
<!-- 循環(huán)函數(shù)組件 -->
<sub-menu v-else :key="props.index + '-' + index" :data="item" :index="props.index + '-' + index"/>
</template>
</a-sub-menu>
</template>說明：key的值是菜單選中時(shí)，所需要識別的唯一標(biāo)識，所以，不能夠重復(fù)
以上就是ant 菜單組件報(bào)錯(cuò)Cannot read property ‘isRootMenu‘ of undefined的詳細(xì)內(nèi)容，更多關(guān)于ant 菜單組件報(bào)錯(cuò)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
我在做項(xiàng)目的時(shí)候，有一個(gè)需求，在離開（跳轉(zhuǎn)或者關(guān)閉）購物車頁面或者刷新購物車頁面的時(shí)候向服務(wù)器提交一次購物車商品數(shù)量的變化。這篇文章主要介紹了vue監(jiān)聽頁面刷新和關(guān)閉功能,需要的朋友可以參考下2019-06-06
這篇文章主要為大家介紹了Vue的自定義事件內(nèi)容分發(fā)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
數(shù)據(jù)過多滑動表格的時(shí)候,看不到表頭不知道對應(yīng)的數(shù)據(jù)是什么,用戶體驗(yàn)操作不友好,要改成表頭固定住,所以本文給大家介紹了關(guān)于element-ui表頭吸附問題的兩個(gè)解決方案,需要的朋友可以參考下2024-01-01
vue實(shí)現(xiàn)tagsview多頁簽導(dǎo)航功能的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)tagsview多頁簽導(dǎo)航功能,本文梳理了一下vue-element-admin項(xiàng)目實(shí)現(xiàn)多頁簽功能的整體步驟，需要的朋友可以參考下2022-08-08
一文搞懂Vue3中toRef和toRefs函數(shù)的使用
這篇文章主要為大家介紹了Vue3中toRef和toRefs函數(shù)的使用方法，文中通過示例為大家進(jìn)行了詳細(xì)的講解，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-07-07
這篇文章主要介紹了Vue中實(shí)現(xiàn)權(quán)限管理詳解,權(quán)限是對特定資源的訪問許可，所謂權(quán)限控制，也就是確保用戶只能訪問到被分配的資源,而前端權(quán)限歸根結(jié)底是請求的發(fā)起權(quán)，請求的發(fā)起可能有下面兩種形式觸發(fā),需要的朋友可以參考下2023-08-08
100行代碼理解和分析vue2.0響應(yīng)式架構(gòu)
通過100行代碼幫助大家理解和分析vue2.0響應(yīng)式架構(gòu)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了Vuex及其使用方法，感興趣的同學(xué)，可以參考下2021-04-04
這篇文章主要介紹了vue 中幾種傳值方法(3種),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue項(xiàng)目兼容ie11的實(shí)現(xiàn)方法
本文主要介紹了vue項(xiàng)目兼容ie11的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08