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插件中的菜單使用
我們?cè)谑褂?ant design of vue插件中的菜單時(shí)，使用組件會(huì)報(bào)錯(cuò)。原因是ant 推薦使用函數(shù)組件，如果，使用傳統(tǒng)的組件，就會(huì)報(bào)錯(cuò)。
Before v2.0, 因組件內(nèi)部會(huì)動(dòng)態(tài)更改a-sub-menu的屬性，如果拆分成單文件，無(wú)法將屬性?huà)燧d到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>首頁(yè)</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>說(shuō)明：key的值是菜單選中時(shí)，所需要識(shí)別的唯一標(biāo)識(shí)，所以，不能夠重復(fù)
以上就是ant 菜單組件報(bào)錯(cuò)Cannot read property ‘isRootMenu‘ of undefined的詳細(xì)內(nèi)容，更多關(guān)于ant 菜單組件報(bào)錯(cuò)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在Vue應(yīng)用程序中,路由組件是構(gòu)建單頁(yè)應(yīng)用的關(guān)鍵部分,傳遞參數(shù)給路由組件可以讓我們動(dòng)態(tài)地展示內(nèi)容,處理用戶(hù)輸入,以及實(shí)現(xiàn)各種交互功能,本文就給大家介紹了六種Vue路由組件傳遞參數(shù)場(chǎng)景,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue環(huán)境變量配置之process.env解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue+bpmn.js實(shí)現(xiàn)自定義流程圖的完整代碼
這篇文章主要介紹了vue+bpmn.js實(shí)現(xiàn)自定義流程圖的完整代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借價(jià)值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了vue請(qǐng)求數(shù)據(jù)的三種方式,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
解決vue項(xiàng)目 build之后資源文件找不到的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目 build之后資源文件找不到的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
這篇文章主要介紹了在nuxt中使用路由重定向的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue Render函數(shù)原理及代碼實(shí)例解析
這篇文章主要介紹了Vue Render函數(shù)原理及代碼實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
Vue項(xiàng)目本地沒(méi)有問(wèn)題但部署到服務(wù)器上提示錯(cuò)誤(問(wèn)題解決方案)
一個(gè) VUE 的項(xiàng)目在本地部署沒(méi)有問(wèn)題，但是部署到服務(wù)器上的時(shí)候提示訪(fǎng)問(wèn)資源的錯(cuò)誤，遇到這樣的問(wèn)題如何解決呢？下面小編給大家?guī)?lái)了Vue項(xiàng)目本地沒(méi)有問(wèn)題但部署到服務(wù)器上提示錯(cuò)誤的解決方法，感興趣的朋友一起看看吧2023-05-05
vue?hash模式改成history,同時(shí)實(shí)現(xiàn)spa預(yù)渲染問(wèn)題
這篇文章主要介紹了vue?hash模式改成history,同時(shí)實(shí)現(xiàn)spa預(yù)渲染問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
詳解基于webpack和vue.js搭建開(kāi)發(fā)環(huán)境
本篇文章主要介紹了詳解基于webpack和vue.js搭建開(kāi)發(fā)環(huán)境 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04