ant?菜單組件報(bào)錯Cannot?read?property?‘isRootMenu‘?of?undefined
ant design of vue插件中的菜單使用
我們在使用 ant design of vue插件中的菜單時,使用組件會報(bào)錯。原因是ant 推薦使用函數(shù)組件,如果,使用傳統(tǒng)的組件,就會報(bào)錯。
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的值是菜單選中時,所需要識別的唯一標(biāo)識,所以,不能夠重復(fù)
以上就是ant 菜單組件報(bào)錯Cannot read property ‘isRootMenu‘ of undefined的詳細(xì)內(nèi)容,更多關(guān)于ant 菜單組件報(bào)錯的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue+bpmn.js實(shí)現(xiàn)自定義流程圖的完整代碼
這篇文章主要介紹了vue+bpmn.js實(shí)現(xiàn)自定義流程圖的完整代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借價值,需要的朋友參考下吧2024-03-03解決vue項(xiàng)目 build之后資源文件找不到的問題
這篇文章主要介紹了解決vue項(xiàng)目 build之后資源文件找不到的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09Vue Render函數(shù)原理及代碼實(shí)例解析
這篇文章主要介紹了Vue Render函數(shù)原理及代碼實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07Vue項(xiàng)目本地沒有問題但部署到服務(wù)器上提示錯誤(問題解決方案)
一個 VUE 的項(xiàng)目在本地部署沒有問題,但是部署到服務(wù)器上的時候提示訪問資源的錯誤,遇到這樣的問題如何解決呢?下面小編給大家?guī)砹薞ue項(xiàng)目本地沒有問題但部署到服務(wù)器上提示錯誤的解決方法,感興趣的朋友一起看看吧2023-05-05vue?hash模式改成history,同時實(shí)現(xiàn)spa預(yù)渲染問題
這篇文章主要介紹了vue?hash模式改成history,同時實(shí)現(xiàn)spa預(yù)渲染問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03詳解基于webpack和vue.js搭建開發(fā)環(huán)境
本篇文章主要介紹了詳解基于webpack和vue.js搭建開發(fā)環(huán)境 ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04