From f64c21c684feb69409d6d30e81d848017b0c47a5 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 18 Nov 2021 12:22:44 +0300
Subject: [PATCH] Fixed #449 - Dynamic labels for Menu components

---
 src/components/breadcrumb/BreadcrumbItem.vue  |  7 +++++--
 src/components/contextmenu/ContextMenuSub.vue | 11 +++++++----
 src/components/megamenu/MegaMenu.vue          | 17 ++++++++++-------
 src/components/menu/Menu.vue                  |  9 ++++++---
 src/components/menu/Menuitem.vue              |  7 +++++--
 src/components/menubar/MenubarSub.vue         | 11 +++++++----
 src/components/panelmenu/PanelMenu.vue        |  9 ++++++---
 src/components/panelmenu/PanelMenuSub.vue     | 11 +++++++----
 src/components/steps/Steps.vue                |  7 +++++--
 src/components/tabmenu/TabMenu.vue            |  9 ++++++---
 src/components/tieredmenu/TieredMenuSub.vue   | 11 +++++++----
 src/components/tree/TreeNode.vue              |  5 ++++-
 src/views/menumodel/MenuModel.vue             |  4 ++--
 13 files changed, 77 insertions(+), 41 deletions(-)

diff --git a/src/components/breadcrumb/BreadcrumbItem.vue b/src/components/breadcrumb/BreadcrumbItem.vue
index 39134cffd..2083a30a9 100755
--- a/src/components/breadcrumb/BreadcrumbItem.vue
+++ b/src/components/breadcrumb/BreadcrumbItem.vue
@@ -4,12 +4,12 @@
             <router-link v-if="item.to" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                 <a :href="href" :class="linkClass({isActive, isExactActive})" @click="onClick($event, navigate)">
                     <span v-if="item.icon" :class="iconClass"></span>
-                    <span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
+                    <span v-if="item.label" class="p-menuitem-text">{{label()}}</span>
                 </a>
             </router-link>
             <a v-else :href="item.url||'#'" :class="linkClass()" @click="onClick" :target="item.target">
                 <span v-if="item.icon" :class="iconClass"></span>
-                <span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
+                <span v-if="item.label" class="p-menuitem-text">{{label()}}</span>
             </a>
         </template>
         <component v-else :is="template" :item="item"></component>
@@ -51,6 +51,9 @@ export default {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label() {
+            return (typeof this.item.label === 'function' ? this.item.label() : this.item.label);
         }
     },
     computed: {
diff --git a/src/components/contextmenu/ContextMenuSub.vue b/src/components/contextmenu/ContextMenuSub.vue
index 5e264faa7..ea3fb303d 100755
--- a/src/components/contextmenu/ContextMenuSub.vue
+++ b/src/components/contextmenu/ContextMenuSub.vue
@@ -1,25 +1,25 @@
 <template>
     <transition name="p-contextmenusub" @enter="onEnter">
         <ul ref="container" :class="containerClass" role="menu" v-if="root ? true : parentActive">
-            <template v-for="(item, i) of model" :key="item.label + i.toString()">
+            <template v-for="(item, i) of model" :key="label(item) + i.toString()">
                 <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 && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                             <a :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple role="menuitem">
                                 <span :class="['p-menuitem-icon', item.icon]"></span>
-                                <span class="p-menuitem-text">{{item.label}}</span>
+                                <span class="p-menuitem-text">{{label(item)}}</span>
                             </a>
                         </router-link>
                         <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" @click="onItemClick($event, item)" v-ripple
                             :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-menuitem-text">{{label(item)}}</span>
                             <span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
                         </a>
                     </template>
                     <component v-else :is="template" :item="item"></component>
-                    <ContextMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :template="template"
+                    <ContextMenuSub :model="item.items" v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :template="template"
                         @leaf-click="onLeafClick" :parentActive="item === activeItem" :exact="exact" />
                 </li>
                 <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
@@ -148,6 +148,9 @@ export default {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
         }
     },
     computed: {
diff --git a/src/components/megamenu/MegaMenu.vue b/src/components/megamenu/MegaMenu.vue
index d858d37e5..3a2f7a2f5 100755
--- a/src/components/megamenu/MegaMenu.vue
+++ b/src/components/megamenu/MegaMenu.vue
@@ -4,41 +4,41 @@
             <slot name="start"></slot>
         </div>
         <ul class="p-megamenu-root-list" role="menubar">
-            <template v-for="(category,index) of model" :key="category.label + '_' + index">
+            <template v-for="(category,index) of model" :key="label(category) + '_' + index">
                 <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 && !disabled(category)" :to="category.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                             <a :href="href" :class="linkClass(category, {isActive, isExactActive})" @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>
+                                <span class="p-menuitem-text">{{label(category)}}</span>
                             </a>
                         </router-link>
                         <a v-else :href="category.url" :class="linkClass(category)" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)"
                             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 class="p-menuitem-text">{{label(category)}}</span>
                             <span v-if="category.items" :class="getCategorySubMenuIcon()"></span>
                         </a>
                     </template>
                     <component v-else :is="$slots.item" :item="category"></component>
                     <div class="p-megamenu-panel" v-if="category.items">
                         <div class="p-megamenu-grid">
-                            <div v-for="(column,columnIndex) of category.items" :key="category.label + '_column_' + columnIndex" :class="getColumnClassName(category)">
+                            <div v-for="(column,columnIndex) of category.items" :key="label(category) + '_column_' + columnIndex" :class="getColumnClassName(category)">
                                 <ul v-for="(submenu,submenuIndex) of column" class="p-megamenu-submenu" :key="submenu.label + '_submenu_' + submenuIndex" role="menu">
                                     <li :class="getSubmenuHeaderClass(submenu)" :style="submenu.style" role="presentation">{{submenu.label}}</li>
-                                    <template v-for="(item, i) of submenu.items" :key="item.label + i.toString()">
+                                    <template v-for="(item, i) of submenu.items" :key="label(item) + 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 && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                                                     <a :href="href" :class="linkClass(item, {isActive, isExactActive})" @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>
+                                                        <span class="p-menuitem-text">{{label(item)}}</span>
                                                     </a>
                                                 </router-link>
                                                 <a v-else :href="item.url" :class="linkClass(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="p-menuitem-text">{{label(item)}}</span>
                                                     <span :class="getSubmenuIcon()" v-if="item.items"></span>
                                                 </a>
                                             </template>
@@ -308,6 +308,9 @@ export default {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label(item) {
+            return (typeof item.disabled === 'function' ? item.label() : item.label);
         }
     },
     computed: {
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index c6a56637b..fd8b8d5fc 100755
--- a/src/components/menu/Menu.vue
+++ b/src/components/menu/Menu.vue
@@ -3,10 +3,10 @@
         <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
             <div :ref="containerRef" :class="containerClass" v-if="popup ? overlayVisible : true" v-bind="$attrs" @click="onOverlayClick">
                 <ul class="p-menu-list p-reset" role="menu">
-                    <template v-for="(item, i) of model" :key="item.label + i.toString()">
+                    <template v-for="(item, i) of model" :key="label(item) + i.toString()">
                         <template v-if="item.items && visible(item) && !item.separator">
                             <li class="p-submenu-header" v-if="item.items">
-                                <slot name="item" :item="item">{{item.label}}</slot>
+                                <slot name="item" :item="item">{{label(item)}}</slot>
                             </li>
                             <template v-for="(child, j) of item.items" :key="child.label + i + j">
                                 <Menuitem v-if="visible(child) && !child.separator" :item="child" @click="itemClick" :template="$slots.item" :exact="exact" />
@@ -14,7 +14,7 @@
                             </template>
                         </template>
                         <li v-else-if="visible(item) && item.separator" :class="['p-menu-separator', item.class]" :style="item.style" :key="'separator' + i.toString()" role="separator"></li>
-                        <Menuitem v-else :key="item.label + i.toString()" :item="item" @click="itemClick" :template="$slots.item" :exact="exact" />
+                        <Menuitem v-else :key="label(item) + i.toString()" :item="item" @click="itemClick" :template="$slots.item" :exact="exact" />
                     </template>
                 </ul>
             </div>
@@ -194,6 +194,9 @@ export default {
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
         },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
+        },
         containerRef(el) {
             this.container = el;
         },
diff --git a/src/components/menu/Menuitem.vue b/src/components/menu/Menuitem.vue
index 49241e197..613bb56d0 100755
--- a/src/components/menu/Menuitem.vue
+++ b/src/components/menu/Menuitem.vue
@@ -4,12 +4,12 @@
             <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                 <a :href="href" @click="onClick($event, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple role="menuitem">
                     <span :class="['p-menuitem-icon', item.icon]"></span>
-                    <span class="p-menuitem-text">{{item.label}}</span>
+                    <span class="p-menuitem-text">{{label()}}</span>
                 </a>
             </router-link>
             <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>
+                <span class="p-menuitem-text">{{label()}}</span>
             </a>
         </template>
         <component v-else :is="template" :item="item"></component>
@@ -48,6 +48,9 @@ export default {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label() {
+            return (typeof this.item.label === 'function' ? this.item.label() : this.item.label);
         }
     },
     computed: {
diff --git a/src/components/menubar/MenubarSub.vue b/src/components/menubar/MenubarSub.vue
index de3f3b14f..0c0167e57 100755
--- a/src/components/menubar/MenubarSub.vue
+++ b/src/components/menubar/MenubarSub.vue
@@ -1,24 +1,24 @@
 <template>
     <ul :class="containerClass" :role="root ? 'menubar' : 'menu'">
-        <template v-for="(item, i) of model" :key="item.label + i.toString()">
+        <template v-for="(item, i) of model" :key="label(item) + i.toString()">
             <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 && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                         <a :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
                             <span :class="['p-menuitem-icon', item.icon]"></span>
-                            <span class="p-menuitem-text">{{item.label}}</span>
+                            <span class="p-menuitem-text">{{label(item)}}</span>
                         </a>
                     </router-link>
                     <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
                         @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-menuitem-text">{{label(item)}}</span>
                         <span :class="getSubmenuIcon()" v-if="item.items"></span>
                     </a>
                 </template>
                 <component v-else :is="template" :item="item"></component>
-                <MenubarSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :mobileActive="mobileActive"
+                <MenubarSub :model="item.items" v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :mobileActive="mobileActive"
                     @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" :template="template" :exact="exact" />
             </li>
             <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
@@ -289,6 +289,9 @@ export default {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
         }
     },
     computed: {
diff --git a/src/components/panelmenu/PanelMenu.vue b/src/components/panelmenu/PanelMenu.vue
index 9b920af7c..073a6ee10 100755
--- a/src/components/panelmenu/PanelMenu.vue
+++ b/src/components/panelmenu/PanelMenu.vue
@@ -1,20 +1,20 @@
 <template>
     <div class="p-panelmenu p-component">
-        <template v-for="(item, index) of model" :key="item.label + '_' + index">
+        <template v-for="(item, index) of model" :key="label(item) + '_' + index">
             <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 && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                             <a :href="href" :class="getHeaderLinkClass(item, {isActive, isExactActive})" @click="onItemClick($event, item, navigate)" role="treeitem">
                                 <span v-if="item.icon" :class="getPanelIcon(item)"></span>
-                                <span class="p-menuitem-text">{{item.label}}</span>
+                                <span class="p-menuitem-text">{{label(item)}}</span>
                             </a>
                         </router-link>
                         <a v-else :href="item.url" :class="getHeaderLinkClass(item)" @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>
-                            <span class="p-menuitem-text">{{item.label}}</span>
+                            <span class="p-menuitem-text">{{label(item)}}</span>
                         </a>
                     </template>
                     <component v-else :is="$slots.item" :item="item"></component>
@@ -128,6 +128,9 @@ export default {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
         }
     },
     components: {
diff --git a/src/components/panelmenu/PanelMenuSub.vue b/src/components/panelmenu/PanelMenuSub.vue
index a1acd00d3..e048cf0d3 100755
--- a/src/components/panelmenu/PanelMenuSub.vue
+++ b/src/components/panelmenu/PanelMenuSub.vue
@@ -1,25 +1,25 @@
 <template>
     <ul class="p-submenu-list" role="tree">
-        <template v-for="(item, i) of model" :key="item.label + i.toString()">
+        <template v-for="(item, i) of model" :key="label(item) + 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 && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive:isRouterActive, isExactActive}">
                         <a :href="href" :class="linkClass(item, {isRouterActive, isExactActive})" @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>
+                            <span class="p-menuitem-text">{{label(item)}}</span>
                         </a>
                     </router-link>
                     <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" @click="onItemClick($event, item)"
                         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>
+                        <span class="p-menuitem-text">{{label(item)}}</span>
                     </a>
                 </template>
                 <component v-else :is="template" :item="item"></component>
                 <transition name="p-toggleable-content">
                     <div class="p-toggleable-content" v-show="isActive(item)">
-                        <PanelMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :template="template"
+                        <PanelMenuSub :model="item.items" v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :template="template"
                             :expandedKeys="expandedKeys" @item-toggle="$emit('item-toggle', $event)" :exact="exact"/>
                     </div>
                 </transition>
@@ -107,6 +107,9 @@ export default {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
         }
     }
 }
diff --git a/src/components/steps/Steps.vue b/src/components/steps/Steps.vue
index 08b22236b..e3db72d6f 100755
--- a/src/components/steps/Steps.vue
+++ b/src/components/steps/Steps.vue
@@ -7,12 +7,12 @@
                         <router-link :to="item.to" v-if="!isItemDisabled(item)" custom v-slot="{navigate, href, isActive, isExactActive}">
                             <a :href="href" :class="linkClass({isActive, isExactActive})" @click="onItemClick($event, item, navigate)" role="presentation">
                                 <span class="p-steps-number">{{index + 1}}</span>
-                                <span class="p-steps-title">{{item.label}}</span>
+                                <span class="p-steps-title">{{label(item)}}</span>
                             </a>
                         </router-link>
                         <span v-else :class="linkClass()" role="presentation">
                             <span class="p-steps-number">{{index + 1}}</span>
-                            <span class="p-steps-title">{{item.label}}</span>
+                            <span class="p-steps-title">{{label(item)}}</span>
                         </span>
                     </template>
                     <component v-else :is="$slots.item" :item="item"></component>
@@ -86,6 +86,9 @@ export default {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
         }
     },
     computed: {
diff --git a/src/components/tabmenu/TabMenu.vue b/src/components/tabmenu/TabMenu.vue
index 2d5bbfe4c..612b6fa12 100755
--- a/src/components/tabmenu/TabMenu.vue
+++ b/src/components/tabmenu/TabMenu.vue
@@ -1,13 +1,13 @@
 <template>
     <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()">
+            <template v-for="(item,i) of model" :key="label(item) + '_' + i.toString()">
                 <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, i, navigate)" role="presentation" v-ripple>
                                 <span :class="getItemIcon(item)" v-if="item.icon"></span>
-                                <span class="p-menuitem-text">{{item.label}}</span>
+                                <span class="p-menuitem-text">{{label(item)}}</span>
                             </a>
                         </template>
                         <component v-else :is="$slots.item" :item="item"></component>
@@ -17,7 +17,7 @@
                     <template v-if="!$slots.item">
                         <a :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item, i)" 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>
+                            <span class="p-menuitem-text">{{label(item)}}</span>
                         </a>
                      </template>
                      <component v-else :is="$slots.item" :item="item"></component>
@@ -121,6 +121,9 @@ export default {
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
         },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
+        },
         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 76d0f159a..d40612584 100755
--- a/src/components/tieredmenu/TieredMenuSub.vue
+++ b/src/components/tieredmenu/TieredMenuSub.vue
@@ -1,24 +1,24 @@
 <template>
     <ul ref="element" :class="containerClass" role="'menubar' : 'menu'" aria-orientation="horizontal">
-        <template v-for="(item, i) of model" :key="item.label + i.toString()">
+        <template v-for="(item, i) of model" :key="label(item) + i.toString()">
             <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 && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
                         <a :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
                             <span :class="['p-menuitem-icon', item.icon]"></span>
-                            <span class="p-menuitem-text">{{item.label}}</span>
+                            <span class="p-menuitem-text">{{label(item)}}</span>
                         </a>
                     </router-link>
                     <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
                         @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-menuitem-text">{{label(item)}}</span>
                         <span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
                     </a>
                 </template>
                 <component v-else :is="template" :item="item"></component>
-                <TieredMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :template="template"
+                <TieredMenuSub :model="item.items" v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :template="template"
                     @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" :exact="exact" />
             </li>
             <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
@@ -234,6 +234,9 @@ export default {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
         }
     },
     computed: {
diff --git a/src/components/tree/TreeNode.vue b/src/components/tree/TreeNode.vue
index fb65a0582..ef4767ce5 100755
--- a/src/components/tree/TreeNode.vue
+++ b/src/components/tree/TreeNode.vue
@@ -13,7 +13,7 @@
             <span :class="icon"></span>
             <span class="p-treenode-label">
                 <component :is="templates[node.type]||templates['default']" :node="node" v-if="templates[node.type]||templates['default']"/>
-                <template v-else>{{node.label}}</template>
+                <template v-else>{{label(node)}}</template>
             </span>
         </div>
         <ul class="p-treenode-children" role="group" v-if="hasChildren && expanded">
@@ -59,6 +59,9 @@ export default {
         toggle() {
             this.$emit('node-toggle', this.node);
         },
+        label(node) {
+            return (typeof node.label === 'function' ? node.label() : node.label);
+        },
         onChildNodeToggle(node) {
             this.$emit('node-toggle', node);
         },
diff --git a/src/views/menumodel/MenuModel.vue b/src/views/menumodel/MenuModel.vue
index 186ab9fd0..cb80aa60f 100755
--- a/src/views/menumodel/MenuModel.vue
+++ b/src/views/menumodel/MenuModel.vue
@@ -40,9 +40,9 @@ const items: [
                         <tbody>
                             <tr>
                                 <td>label</td>
-                                <td>string</td>
+                                <td>string | function</td>
                                 <td>null</td>
-                                <td>Text of the item.</td>
+                                 <td>Property name or getter function to use as the label of an item.</td>
                             </tr>
                             <tr>
                                 <td>icon</td>