From 1ecaba2b8736d4cd018ceac68c3eb4db98477044 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 24 Aug 2021 09:52:57 +0300
Subject: [PATCH] Fixed #1293 - MenuModel - disabled should be a function to
 support dynamic behavior

---
 src/components/breadcrumb/BreadcrumbItem.vue  | 11 ++++++----
 src/components/contextmenu/ContextMenuSub.vue | 13 +++++++-----
 src/components/dock/DockSub.vue               |  9 +++++---
 src/components/megamenu/MegaMenu.vue          | 21 +++++++++++--------
 src/components/menu/Menuitem.vue              | 15 +++++++------
 src/components/menubar/MenubarSub.vue         | 13 +++++++-----
 src/components/panelmenu/PanelMenu.vue        | 11 ++++++----
 src/components/panelmenu/PanelMenuSub.vue     | 11 ++++++----
 src/components/steps/Steps.vue                |  7 +++++--
 src/components/tabmenu/TabMenu.vue            | 13 +++++++-----
 src/components/tieredmenu/TieredMenuSub.vue   | 13 +++++++-----
 src/views/menumodel/MenuModel.vue             |  4 ++--
 12 files changed, 87 insertions(+), 54 deletions(-)

diff --git a/src/components/breadcrumb/BreadcrumbItem.vue b/src/components/breadcrumb/BreadcrumbItem.vue
index 727bed42f..cd32dcb8d 100755
--- a/src/components/breadcrumb/BreadcrumbItem.vue
+++ b/src/components/breadcrumb/BreadcrumbItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <li :class="containerClass" v-if="visible()">
+    <li :class="containerClass(item)" v-if="visible()">
         <template v-if="!template">
             <router-link v-if="item.to" :to="item.to" custom v-slot="{navigate, href}">
                 <a :href="href" class="p-menuitem-link" @click="onClick($event, navigate)">
@@ -36,14 +36,17 @@ export default {
                 navigate(event);
             }
         },
+        containerClass(item) {
+            return [{'p-disabled': this.disabled(item)}, this.item.class];
+        },
         visible() {
             return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     },
     computed: {
-        containerClass() {
-            return [{'p-disabled': this.item.disabled}, this.item.class];
-        },
         iconClass() {
             return ['p-menuitem-icon', this.item.icon];
         }
diff --git a/src/components/contextmenu/ContextMenuSub.vue b/src/components/contextmenu/ContextMenuSub.vue
index be0098ae8..156d989f0 100755
--- a/src/components/contextmenu/ContextMenuSub.vue
+++ b/src/components/contextmenu/ContextMenuSub.vue
@@ -5,14 +5,14 @@
                 <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
                     @mouseenter="onItemMouseEnter($event, item)">
                     <template v-if="!template">
-                        <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
+                        <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
                             <a :href="href" @click="onItemClick($event, item, navigate)" :class="getLinkClass(item)" v-ripple role="menuitem">
                                 <span :class="['p-menuitem-icon', item.icon]"></span>
                                 <span class="p-menuitem-text">{{item.label}}</span>
                             </a>
                         </router-link>
                         <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onItemClick($event, item)" v-ripple
-                            :aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem" :tabindex="item.disabled ? null : '0'">
+                            :aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem" :tabindex="disabled(item) ? null : '0'">
                             <span :class="['p-menuitem-icon', item.icon]"></span>
                             <span class="p-menuitem-text">{{item.label}}</span>
                             <span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
@@ -67,7 +67,7 @@ export default {
     },
     methods: {
         onItemMouseEnter(event, item) {
-            if (item.disabled) {
+            if (this.disabled(item)) {
                 event.preventDefault();
                 return;
             }
@@ -75,7 +75,7 @@ export default {
             this.activeItem = item;
         },
         onItemClick(event, item, navigate) {
-            if (item.disabled) {
+            if (this.disabled(item)) {
                 event.preventDefault();
                 return;
             }
@@ -133,10 +133,13 @@ export default {
             ]
         },
         getLinkClass(item) {
-            return ['p-menuitem-link', {'p-disabled': item.disabled}];
+            return ['p-menuitem-link', {'p-disabled': this.disabled(item)}];
         },
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     },
     computed: {
diff --git a/src/components/dock/DockSub.vue b/src/components/dock/DockSub.vue
index f0c6ecce7..17a751fbd 100644
--- a/src/components/dock/DockSub.vue
+++ b/src/components/dock/DockSub.vue
@@ -2,8 +2,8 @@
     <ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
         <li v-for="(item, index) of model" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
             <template v-if="!template">
-                <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{href}">
-                    <a :href="href" role="menuitem" :class="['p-dock-action', { 'p-disabled': item.disabled }]" :target="item.target" 
+                <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{href}">
+                    <a :href="href" role="menuitem" :class="['p-dock-action', { 'p-disabled': disabled(item) }]" :target="item.target" 
                         :data-pr-tooltip="item.label" @click="onItemClick(e, item)">
                         <template v-if="typeof item.icon === 'string'">
                             <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
@@ -11,7 +11,7 @@
                         <component v-else :is="item.icon"></component>
                     </a>
                 </router-link>
-                <a v-else :href="item.url || '#'" role="menuitem" :class="['p-dock-action', { 'p-disabled': item.disabled }]" :target="item.target" 
+                <a v-else :href="item.url || '#'" role="menuitem" :class="['p-dock-action', { 'p-disabled': disabled(item) }]" :target="item.target" 
                     :data-pr-tooltip="item.label" @click="onItemClick($event, item)">
                     <template v-if="typeof item.icon === 'string'">
                         <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
@@ -64,6 +64,9 @@ export default {
                 'p-dock-item-next': (this.currentIndex + 1) === index,
                 'p-dock-item-second-next': (this.currentIndex + 2) === index
             }];
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     }
 }
diff --git a/src/components/megamenu/MegaMenu.vue b/src/components/megamenu/MegaMenu.vue
index c396d7b4e..b3b584251 100755
--- a/src/components/megamenu/MegaMenu.vue
+++ b/src/components/megamenu/MegaMenu.vue
@@ -5,14 +5,14 @@
                 <li v-if="visible(category)"  :class="getCategoryClass(category)" :style="category.style"
                     @mouseenter="onCategoryMouseEnter($event, category)" role="none">
                     <template v-if="!$slots.item">
-                        <router-link v-if="category.to && !category.disabled" :to="category.to" custom v-slot="{navigate, href}">
+                        <router-link v-if="category.to && !disabled(category)" :to="category.to" custom v-slot="{navigate, href}">
                             <a :href="href" :class="getLinkClass(category)" @click="onCategoryClick($event, category, navigate)" @keydown="onCategoryKeydown($event, category)" role="menuitem" v-ripple>
                                 <span v-if="category.icon" :class="getCategoryIcon(category)"></span>
                                 <span class="p-menuitem-text">{{category.label}}</span>
                             </a>
                         </router-link>
                         <a v-else :href="category.url" :class="getLinkClass(category)" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)"
-                            role="menuitem" :aria-haspopup="category.items != null" :aria-expanded="category === activeItem" :tabindex="category.disabled ? null : '0'" v-ripple>
+                            role="menuitem" :aria-haspopup="category.items != null" :aria-expanded="category === activeItem" :tabindex="disabled(category) ? null : '0'" v-ripple>
                             <span v-if="category.icon" :class="getCategoryIcon(category)"></span>
                             <span class="p-menuitem-text">{{category.label}}</span>
                             <span v-if="category.items" :class="getCategorySubMenuIcon()"></span>
@@ -27,13 +27,13 @@
                                     <template v-for="(item, i) of submenu.items" :key="item.label + i.toString()">
                                         <li role="none" :class="getSubmenuItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator">
                                             <template v-if="!$slots.item">
-                                                <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
+                                                <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
                                                     <a :href="href" :class="getLinkClass(item)" @click="onLeafClick($event, item, navigate)" role="menuitem" v-ripple>
                                                         <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
                                                         <span class="p-menuitem-text">{{item.label}}</span>
                                                     </a>
                                                 </router-link>
-                                                <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onLeafClick($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
+                                                <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onLeafClick($event, item)" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
                                                     <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
                                                     <span class="p-menuitem-text">{{item.label}}</span>
                                                     <span :class="getSubmenuIcon()" v-if="item.items"></span>
@@ -83,7 +83,7 @@ export default {
     },
     methods: {
         onLeafClick(event, item, navigate) {
-            if (item.disabled) {
+            if (this.disabled(item)) {
                 event.preventDefault();
                 return;
             }
@@ -102,7 +102,7 @@ export default {
             }
         },
         onCategoryMouseEnter(event, category) {
-            if (category.disabled) {
+            if (this.disabled(category)) {
                 event.preventDefault();
                 return;
             }
@@ -112,7 +112,7 @@ export default {
             }
         },
         onCategoryClick(event, category, navigate) {
-            if (category.disabled) {
+            if (this.disabled(category)) {
                 event.preventDefault();
                 return;
             }
@@ -266,13 +266,13 @@ export default {
             return columnClass;
         },
         getSubmenuHeaderClass(submenu) {
-            return ['p-megamenu-submenu-header', submenu.class, {'p-disabled': submenu.disabled}];
+            return ['p-megamenu-submenu-header', submenu.class, {'p-disabled': this.disabled(submenu)}];
         },
         getSubmenuItemClass(item) {
             return ['p-menuitem', item.class];
         },
         getLinkClass(item) {
-            return ['p-menuitem-link', {'p-disabled': item.disabled}];
+            return ['p-menuitem-link', {'p-disabled': this.disabled(item)}];
         },
         bindDocumentClickListener() {
             if (!this.documentClickListener) {
@@ -294,6 +294,9 @@ export default {
         },
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     },
     computed: {
diff --git a/src/components/menu/Menuitem.vue b/src/components/menu/Menuitem.vue
index 7b31c9d54..41a1f5df4 100755
--- a/src/components/menu/Menuitem.vue
+++ b/src/components/menu/Menuitem.vue
@@ -1,13 +1,13 @@
 <template>
     <li :class="containerClass" role="none" :style="item.style" v-if="visible()">
         <template v-if="!template">
-            <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
-                <a :href="href" @click="onClick($event, navigate)" :class="linkClass" v-ripple role="menuitem">
+            <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
+                <a :href="href" @click="onClick($event, navigate)" :class="linkClass(item)" v-ripple role="menuitem">
                     <span :class="['p-menuitem-icon', item.icon]"></span>
                     <span class="p-menuitem-text">{{item.label}}</span>
                 </a>
             </router-link>
-            <a v-else :href="item.url" :class="linkClass" @click="onClick" :target="item.target" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
+            <a v-else :href="item.url" :class="linkClass(item)" @click="onClick" :target="item.target" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
                 <span :class="['p-menuitem-icon', item.icon]"></span>
                 <span class="p-menuitem-text">{{item.label}}</span>
             </a>
@@ -35,16 +35,19 @@ export default {
                 navigate: navigate
             });
         },
+        linkClass(item) {
+            return ['p-menuitem-link', {'p-disabled': this.disabled(item)}];
+        },
         visible() {
             return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     },
     computed: {
         containerClass() {
             return ['p-menuitem', this.item.class];
-        },
-        linkClass() {
-            return ['p-menuitem-link', {'p-disabled': this.item.disabled}];
         }
     },
     directives: {
diff --git a/src/components/menubar/MenubarSub.vue b/src/components/menubar/MenubarSub.vue
index 34be96660..da63d3a11 100755
--- a/src/components/menubar/MenubarSub.vue
+++ b/src/components/menubar/MenubarSub.vue
@@ -4,14 +4,14 @@
             <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
                 @mouseenter="onItemMouseEnter($event, item)">
                 <template v-if="!template">
-                    <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
+                    <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
                         <a :href="href" @click="onItemClick($event, item, navigate)" :class="getLinkClass(item)" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
                             <span :class="['p-menuitem-icon', item.icon]"></span>
                             <span class="p-menuitem-text">{{item.label}}</span>
                         </a>
                     </router-link>
                     <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
-                        @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
+                        @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
                         <span :class="['p-menuitem-icon', item.icon]"></span>
                         <span class="p-menuitem-text">{{item.label}}</span>
                         <span :class="getSubmenuIcon()" v-if="item.items"></span>
@@ -82,7 +82,7 @@ export default {
     },
     methods: {
         onItemMouseEnter(event, item) {
-            if (item.disabled || this.mobileActive) {
+            if (this.disabled(item) || this.mobileActive) {
                 event.preventDefault();
                 return;
             }
@@ -97,7 +97,7 @@ export default {
             }
         },
         onItemClick(event, item, navigate) {
-            if (item.disabled) {
+            if (this.disabled(item)) {
                 event.preventDefault();
                 return;
             }
@@ -251,7 +251,7 @@ export default {
             ]
         },
         getLinkClass(item) {
-            return ['p-menuitem-link', {'p-disabled': item.disabled}];
+            return ['p-menuitem-link', {'p-disabled': this.disabled(item)}];
         },
         bindDocumentClickListener() {
             if (!this.documentClickListener) {
@@ -278,6 +278,9 @@ export default {
         },
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     },
     computed: {
diff --git a/src/components/panelmenu/PanelMenu.vue b/src/components/panelmenu/PanelMenu.vue
index d87d2cd26..a5e53ede4 100755
--- a/src/components/panelmenu/PanelMenu.vue
+++ b/src/components/panelmenu/PanelMenu.vue
@@ -4,13 +4,13 @@
             <div v-if="visible(item)"  :class="getPanelClass(item)" :style="item.style">
                 <div :class="getHeaderClass(item)" :style="item.style">
                     <template v-if="!$slots.item">
-                        <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
+                        <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
                             <a :href="href" class="p-panelmenu-header-link" @click="onItemClick($event, item, navigate)" role="treeitem">
                                 <span v-if="item.icon" :class="getPanelIcon(item)"></span>
                                 <span class="p-menuitem-text">{{item.label}}</span>
                             </a>
                         </router-link>
-                        <a v-else :href="item.url" class="p-panelmenu-header-link" @click="onItemClick($event, item)" :tabindex="item.disabled ? null : '0'"
+                        <a v-else :href="item.url" class="p-panelmenu-header-link" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'"
                             :aria-expanded="isActive(item)" :id="ariaId +'_header'" :aria-controls="ariaId +'_content'">
                             <span v-if="item.items" :class="getPanelToggleIcon(item)"></span>
                             <span v-if="item.icon" :class="getPanelIcon(item)"></span>
@@ -61,7 +61,7 @@ export default {
                 this.activeItem = item;
             }
             
-            if (item.disabled) {
+            if (this.disabled(item)) {
                 event.preventDefault();
                 return;
             }
@@ -111,10 +111,13 @@ export default {
             return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
         },
         getHeaderClass(item) {
-            return ['p-component p-panelmenu-header', {'p-highlight': this.isActive(item), 'p-disabled': item.disabled}];
+            return ['p-component p-panelmenu-header', {'p-highlight': this.isActive(item), 'p-disabled': this.disabled(item)}];
         },
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     },
     components: {
diff --git a/src/components/panelmenu/PanelMenuSub.vue b/src/components/panelmenu/PanelMenuSub.vue
index b2c74c14e..e52379e84 100755
--- a/src/components/panelmenu/PanelMenuSub.vue
+++ b/src/components/panelmenu/PanelMenuSub.vue
@@ -3,14 +3,14 @@
         <template v-for="(item, i) of model" :key="item.label + i.toString()">
             <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator">
                 <template v-if="!template">
-                    <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
+                    <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
                         <a :href="href" :class="getLinkClass(item)" @click="onItemClick($event, item, navigate)" role="treeitem" :aria-expanded="isActive(item)">
                             <span :class="['p-menuitem-icon', item.icon]"></span>
                             <span class="p-menuitem-text">{{item.label}}</span>
                         </a>
                     </router-link>
                     <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onItemClick($event, item)"
-                        role="treeitem" :aria-expanded="isActive(item)" :tabindex="item.disabled ? null : '0'">
+                        role="treeitem" :aria-expanded="isActive(item)" :tabindex="disabled(item) ? null : '0'">
                         <span :class="getSubmenuIcon(item)" v-if="item.items"></span>
                         <span :class="['p-menuitem-icon', item.icon]"></span>
                         <span class="p-menuitem-text">{{item.label}}</span>
@@ -58,7 +58,7 @@ export default {
                 this.activeItem = item;
             }
             
-            if (item.disabled) {
+            if (this.disabled(item)) {
                 event.preventDefault();
                 return;
             }
@@ -85,7 +85,7 @@ export default {
             return ['p-menuitem', item.className];
         },
         getLinkClass(item) {
-            return ['p-menuitem-link', {'p-disabled': item.disabled}];
+            return ['p-menuitem-link', {'p-disabled': this.disabled(item)}];
         },
         isActive(item) {
             return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
@@ -96,6 +96,9 @@ export default {
         },
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     }
 }
diff --git a/src/components/steps/Steps.vue b/src/components/steps/Steps.vue
index 858630685..d1d71d58e 100755
--- a/src/components/steps/Steps.vue
+++ b/src/components/steps/Steps.vue
@@ -43,7 +43,7 @@ export default {
     },
     methods: {
         onItemClick(event, item, navigate) {
-            if (item.disabled || this.readonly) {
+            if (this.disabled(item) || this.readonly) {
                 event.preventDefault();
                 return;
             }
@@ -69,10 +69,13 @@ export default {
             }];
         },
         isItemDisabled(item) {
-            return (item.disabled || (this.readonly && !this.isActive(item)));
+            return (this.disabled(item) || (this.readonly && !this.isActive(item)));
         },
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     },
     computed: {
diff --git a/src/components/tabmenu/TabMenu.vue b/src/components/tabmenu/TabMenu.vue
index 6bc9fbc71..340ca35fa 100755
--- a/src/components/tabmenu/TabMenu.vue
+++ b/src/components/tabmenu/TabMenu.vue
@@ -2,7 +2,7 @@
     <div class="p-tabmenu p-component">
         <ul ref="nav" class="p-tabmenu-nav p-reset" role="tablist">
             <template v-for="(item,i) of model" :key="item.label + '_' + i.toString()">
-                <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
+                <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                     <li :class="getRouteItemClass(item,isActive,isExactActive)" :style="item.style" v-if="visible(item)" role="tab">
                         <template v-if="!$slots.item">
                             <a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, navigate)" role="presentation" v-ripple>
@@ -15,7 +15,7 @@
                 </router-link>
                 <li v-else-if="visible(item)" :class="getItemClass(item)" role="tab">
                     <template v-if="!$slots.item">
-                        <a :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)" role="presentation" :tabindex="item.disabled ? null : '0'" v-ripple>
+                        <a :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)" role="presentation" :tabindex="disabled(item) ? null : '0'" v-ripple>
                             <span :class="getItemIcon(item)" v-if="item.icon"></span>
                             <span class="p-menuitem-text">{{item.label}}</span>
                         </a>
@@ -61,7 +61,7 @@ export default {
     },
     methods: {
         onItemClick(event, item, navigate) {
-            if (item.disabled) {
+            if (this.disabled(item)) {
                 event.preventDefault();
                 return;
             }
@@ -79,13 +79,13 @@ export default {
         },
         getItemClass(item) {
             return ['p-tabmenuitem', item.class, {
-                'p-disabled': item.disabled
+                'p-disabled': this.disabled(item)
             }];
         },
         getRouteItemClass(item, isActive, isExactActive) {
             return ['p-tabmenuitem', item.class, {
                  'p-highlight': this.exact ? isExactActive : isActive,
-                'p-disabled': item.disabled
+                'p-disabled': this.disabled(item)
             }];
         },
         getItemIcon(item) {
@@ -94,6 +94,9 @@ export default {
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
         },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
         updateInkBar() {
             let tabs = this.$refs.nav.children;
             let inkHighlighted = false;
diff --git a/src/components/tieredmenu/TieredMenuSub.vue b/src/components/tieredmenu/TieredMenuSub.vue
index f171f595a..0ad48dfe9 100755
--- a/src/components/tieredmenu/TieredMenuSub.vue
+++ b/src/components/tieredmenu/TieredMenuSub.vue
@@ -4,14 +4,14 @@
             <li :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
                 @mouseenter="onItemMouseEnter($event, item)" role="none">
                 <template v-if="!template">
-                    <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
+                    <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
                         <a :href="href" @click="onItemClick($event, item, navigate)" :class="getLinkClass(item)" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
                             <span :class="['p-menuitem-icon', item.icon]"></span>
                             <span class="p-menuitem-text">{{item.label}}</span>
                         </a>
                     </router-link>
                     <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
-                        @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
+                        @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
                         <span :class="['p-menuitem-icon', item.icon]"></span>
                         <span class="p-menuitem-text">{{item.label}}</span>
                         <span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
@@ -78,7 +78,7 @@ export default {
     },
     methods: {
         onItemMouseEnter(event, item) {
-            if (item.disabled) {
+            if (this.disabled(item)) {
                 event.preventDefault();
                 return;
             }
@@ -93,7 +93,7 @@ export default {
             }
         },
         onItemClick(event, item, navigate) {
-            if (item.disabled) {
+            if (this.disabled(item)) {
                 event.preventDefault();
                 return;
             }
@@ -201,7 +201,7 @@ export default {
             ]
         },
         getLinkClass(item) {
-            return ['p-menuitem-link', {'p-disabled': item.disabled}];
+            return ['p-menuitem-link', {'p-disabled': this.disabled(item)}];
         },
         bindDocumentClickListener() {
             if (!this.documentClickListener) {
@@ -223,6 +223,9 @@ export default {
         },
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+        },
+        disabled(item) {
+            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         }
     },
     computed: {
diff --git a/src/views/menumodel/MenuModel.vue b/src/views/menumodel/MenuModel.vue
index c616f9f10..186ab9fd0 100755
--- a/src/views/menumodel/MenuModel.vue
+++ b/src/views/menumodel/MenuModel.vue
@@ -76,9 +76,9 @@ const items: [
                             </tr>
                             <tr>
                                 <td>disabled</td>
-                                <td>boolean</td>
+                                <td>boolean/function</td>
                                 <td>false</td>
-                                <td>When set as true, disables the menuitem.</td>
+                                <td>A boolean or a function to return a boolean to specify if the item is disabled.</td>
                             </tr>
                             <tr>
                                 <td>visible</td>