Fixed #1029 - Menubar, ContextMenu, TieredMenu warning

package.json

@@ -58,7 +58,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0-beta.9",
     "sass-loader": "^8.0.2",
-    "vue": "3.0.3",
+    "vue": "3.0.6",
     "vue-router": "^4.0.0-0",
     "webpack-cli": "^4.3.0"
   }

src/components/accordion/Accordion.vue

@@ -93,7 +93,7 @@ export default {
             return ['p-accordion-header', {'p-highlight': this.isTabActive(i), 'p-disabled': this.isTabDisabled(tab)}];
         },
         getTabAriaId(i) {
-            return this.ariaId + + '_' + i;
+            return this.ariaId + '_' + i;
         },
         getHeaderIcon(i) {
             const active = this.isTabActive(i);

src/components/carousel/Carousel.vue

@@ -41,7 +41,7 @@
 				</button>
 			</div>
 			<ul :class="indicatorsContentClasses">
-				<li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i" :class="['p-carousel-indicator', {'p-highlight': d_page === i}]">
+				<li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="['p-carousel-indicator', {'p-highlight': d_page === i}]">
 					<button class="p-link" @click="onIndicatorClick($event, i)" type="button" />
 				</li>
 			</ul>

src/components/contextmenu/ContextMenuSub.vue

@@ -1,7 +1,7 @@
 <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">
+            <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"
                     @mouseenter="onItemMouseEnter($event, item)">
                     <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
@@ -19,7 +19,7 @@
                     <sub-menu :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'"
                         @leaf-click="onLeafClick" :parentActive="item === activeItem" />
                 </li>
-                <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i" role="separator"></li>
+                <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
             </template>
         </ul>
     </transition>

src/components/megamenu/MegaMenu.vue

@@ -21,7 +21,7 @@
                             <div v-for="(column,columnIndex) of category.items" :key="category.label + '_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">
+                                    <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">
                                             <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
                                                 <a :href="href" :class="getLinkClass(item)" @click="onLeafClick($event, item, navigate)" role="menuitem" v-ripple>
@@ -35,7 +35,7 @@
                                                 <span :class="getSubmenuIcon()" v-if="item.items"></span>
                                             </a>
                                         </li>
-                                        <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i" role="separator"></li>
+                                        <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
                                     </template>
                                 </ul>
                             </div>

src/components/menu/Menu.vue

@@ -2,7 +2,7 @@
     <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave">
         <div :ref="containerRef" :class="containerClass" v-if="popup ? overlayVisible : true">
             <ul class="p-menu-list p-reset" role="menu">
-                <template v-for="(item, i) of model" :key="item.label+i">
+                <template v-for="(item, i) of model" :key="item.label + i.toString()">
                     <template v-if="item.items && visible(item) && !item.separator">
                         <li class="p-submenu-header" v-if="item.items">{{item.label}}</li>
                         <template v-for="(child, j) of item.items" :key="child.label + i + j">
@@ -10,7 +10,7 @@
                             <li v-else-if="visible(child) && child.separator" :class="['p-menu-separator', child.class]" :style="child.style" :key="'separator' + i + j" role="separator"></li>
                         </template>
                     </template>
-                    <li v-else-if="visible(item) && item.separator" :class="['p-menu-separator', item.class]" :style="item.style" :key="'separator' + i" role="separator"></li>
+                    <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" :item="item" @click="itemClick" />
                 </template>
             </ul>

src/components/menubar/MenubarSub.vue

@@ -1,6 +1,6 @@
 <template>
     <ul :class="containerClass" :role="root ? 'menubar' : 'menu'">
-        <template v-for="(item, i) of model" :key="item.label + i">
+        <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"
                 @mouseenter="onItemMouseEnter($event, item)">
                 <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
@@ -18,7 +18,7 @@
                 <sub-menu :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :mobileActive="mobileActive"
                     @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" />
             </li>
-            <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i" role="separator"></li>
+            <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
         </template>
     </ul>
 </template>

src/components/panelmenu/PanelMenuSub.vue

@@ -1,6 +1,6 @@
 <template>
     <ul class="p-submenu-list" role="tree">
-        <template v-for="(item, i) of model" :key="item.label + i">
+        <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">
                 <router-link v-if="item.to && !item.disabled" :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)"> 
@@ -20,7 +20,7 @@
                     </div>
                 </transition>
             </li>
-            <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i"></li>
+            <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()"></li>
         </template>
     </ul>
 </template>

src/components/tabmenu/TabMenu.vue

@@ -1,7 +1,7 @@
 <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">
+            <template v-for="(item,i) of model" :key="item.label + '_' + i.toString()">
                 <li :class="getItemClass(item)" :style="item.style" v-if="visible(item)" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
                     <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
                         <a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, navigate)" role="presentation" v-ripple>

src/components/terminal/Terminal.vue

@@ -2,7 +2,7 @@
     <div class="p-terminal p-component" @click="onClick">
         <div v-if="welcomeMessage">{{welcomeMessage}}</div>
         <div class="p-terminal-content">
-            <div v-for="(command,i) of commands" :key="command.text + '_' + i">
+            <div v-for="(command,i) of commands" :key="command.text + i.toString()">
                 <span class="p-terminal-prompt">{{prompt}}</span>
                 <span class="p-terminal-command">{{command.text}}</span>
                 <div class="p-terminal-response">{{command.response}}</div>

src/components/tieredmenu/TieredMenuSub.vue

@@ -1,6 +1,6 @@
 <template>
     <ul ref="element" :class="containerClass" role="'menubar' : 'menu'" aria-orientation="horizontal">
-        <template v-for="(item, i) of model" :key="item.label + i">
+        <template v-for="(item, i) of model" :key="item.label + i.toString()">
             <li :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" 
                 @mouseenter="onItemMouseEnter($event, item)" role="none">
                 <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
@@ -18,7 +18,7 @@
                 <sub-menu :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'"
                     @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" />
             </li>
-            <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i" role="separator"></li>
+            <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
         </template>
     </ul>
 </template>