javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): ion-tab-bar no longer throws undefined error when re-creating tabs (#22261)

Browse Source 
resolves #22255
This commit is contained in:
Liam DeBeasi
2020-10-07 09:37:25 -04:00
committed by GitHub
parent 2bad1bb82e
commit d746561ea2
4 changed files with 33 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/vue/src/components/IonTabBar.ts
View File

@ -9,10 +9,10 @@ export const IonTabBar = defineComponent({
// TODO types // TODO types
const tabs = Array.from(this.$el.querySelectorAll('ion-tab-button')) as any[]; const tabs = Array.from(this.$el.querySelectorAll('ion-tab-button')) as any[];
const activeTab = tabs.find(tab => currentRoute.pathname.startsWith(tab.href)); const activeTab = tabs.find(tab => currentRoute.pathname.startsWith(tab.href));
const tabBar = this.$refs.ionTabBar;
if (activeTab) { if (activeTab && tabBar) {
ionRouter.handleSetCurrentTab(activeTab.tab); ionRouter.handleSetCurrentTab(activeTab.tab);
const tabBar = this.$refs.ionTabBar;
tabBar.selectedTab = activeTab.tab; tabBar.selectedTab = activeTab.tab;
} }
} }

9
packages/vue/test-app/src/views/Tab1.vue
View File

@ -1,7 +1,10 @@
<template> <template>
<ion-page> <ion-page data-pageid="tab1">
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons>
<ion-back-button default-href="/"></ion-back-button>
</ion-buttons>
<ion-title>Tab 1</ion-title> <ion-title>Tab 1</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
@ -18,11 +21,11 @@
</template> </template>
<script> <script>
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue'; import { IonButtons, IonBackButton, IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue'; import ExploreContainer from '@/components/ExploreContainer.vue';
export default { export default {
name: 'Tab1', name: 'Tab1',
components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage } components: { IonButtons, IonBackButton, ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
} }
</script> </script>

12
packages/vue/test-app/src/views/Tabs.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<ion-page> <ion-page data-pageid="tabs">
<ion-content> <ion-content>
<ion-tabs> <ion-tabs>
<ion-tab-bar slot="bottom"> <ion-tab-bar slot="bottom">
@ -7,12 +7,12 @@
<ion-icon :icon="triangle" /> <ion-icon :icon="triangle" />
<ion-label>Tab 1</ion-label> <ion-label>Tab 1</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="tab2" href="/tabs/tab2"> <ion-tab-button tab="tab2" href="/tabs/tab2">
<ion-icon :icon="ellipse" /> <ion-icon :icon="ellipse" />
<ion-label>Tab 2</ion-label> <ion-label>Tab 2</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="tab3" href="/tabs/tab3"> <ion-tab-button tab="tab3" href="/tabs/tab3">
<ion-icon :icon="square" /> <ion-icon :icon="square" />
<ion-label>Tab 3</ion-label> <ion-label>Tab 3</ion-label>
@ -32,10 +32,10 @@ export default {
components: { IonContent, IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage }, components: { IonContent, IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage },
setup() { setup() {
return { return {
ellipse, ellipse,
square, square,
triangle, triangle,
} }
} }
} }
</script> </script>

19
packages/vue/test-app/tests/e2e/specs/tabs.js Normal file
View File

@ -0,0 +1,19 @@
describe('Tabs', () => {
beforeEach(() => {
cy.visit('http://localhost:8080')
})
it('should be able to create and destroy tabs', () => {
cy.get('#tabs').click();
cy.ionPageVisible('tab1');
cy.ionBackClick('tab1');
cy.ionPageDoesNotExist('tabs');
cy.get('#tabs').click();
cy.ionPageVisible('tab1');
cy.ionBackClick('tab1');
cy.ionPageDoesNotExist('tabs');
});
})