diff --git a/src/components/accordion/Accordion.vue b/src/components/accordion/Accordion.vue
index 726f6c501..2f8e4dfcf 100755
--- a/src/components/accordion/Accordion.vue
+++ b/src/components/accordion/Accordion.vue
@@ -5,8 +5,8 @@
                 <a role="tab" class="p-accordion-header-link" @click="onTabClick($event, tab, i)" @keydown="onTabKeydown($event, tab, i)" :tabindex="isTabDisabled(tab) ? null : '0'"
                     :aria-expanded="isTabActive(i)" :id="getTabAriaId(i) + '_header'" :aria-controls="getTabAriaId(i) + '_content'">
                     <span :class="getHeaderIcon(i)"></span>
-                    <span class="p-accordion-header-text" v-if="tab.props && tab.props.header">{{tab.props.header}}</span>
-                    <component :is="tab.children.header" v-if="tab.children && tab.children.header"></component>
+                    <span class="p-accordion-header-text" v-if="tab.props?.header">{{tab.props?.header}}</span>
+                    <component :is="tab.children.header" v-if="tab.children?.header"></component>
                 </a>
             </div>
             <transition name="p-toggleable-content">
@@ -80,10 +80,10 @@ export default {
                 return index === this.d_activeIndex;
         },
         getKey(tab, i) {
-            return tab.props && tab.props.header ? tab.props.header : i;
+            return tab.props?.header ? tab.props.header : i;
         },
         isTabDisabled(tab) {
-            return tab.props && tab.props.disabled;
+            return tab.props?.disabled;
         },
         getTabClass(i) {
             return ['p-accordion-tab', {'p-accordion-tab-active': this.isTabActive(i)}];
diff --git a/src/components/tabview/TabView.vue b/src/components/tabview/TabView.vue
index cbd3d3591..2e57445bf 100755
--- a/src/components/tabview/TabView.vue
+++ b/src/components/tabview/TabView.vue
@@ -3,8 +3,8 @@
         <ul ref="nav" class="p-tabview-nav" role="tablist">
             <li role="presentation" v-for="(tab, i) of tabs" :key="getKey(tab,i)" :class="[{'p-highlight': (d_activeIndex === i), 'p-disabled': isTabDisabled(tab)}]">
                 <a role="tab" class="p-tabview-nav-link" @click="onTabClick($event, i)" @keydown="onTabKeydown($event, i)" :tabindex="isTabDisabled(tab) ? null : '0'" :aria-selected="d_activeIndex === i" v-ripple>
-                    <span class="p-tabview-title" v-if="tab.props && tab.props.header">{{tab.props.header}}</span>
-                    <component :is="tab.children.header" v-if="tab.children && tab.children.header"></component>
+                    <span class="p-tabview-title" v-if="tab.props?.header">{{tab.props?.header}}</span>
+                    <component :is="tab.children.header" v-if="tab.children?.header"></component>
                 </a>
             </li>
             <li ref="inkbar" class="p-tabview-ink-bar"></li>
@@ -67,10 +67,10 @@ export default {
             this.$refs.inkbar.style.left =  DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
         },
         getKey(tab, i) {
-            return tab.props && tab.props.header ? tab.props.header : i;
+            return tab.props?.header ? tab.props.header : i;
         },
         isTabDisabled(tab) {
-            return tab.props && tab.props.disabled;
+            return tab.props?.disabled;
         }
     },
     computed: {