ionic-team / ionic-team/ionic-framework

bug: vue, cannot wrap tab button in custom component

Ouverte
#25,919 5 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
package: vue type: bug
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 15 h
PR mergées (30 j)
51

Description

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

- [ ] v4.x
- [ ] v5.x
- [X] v6.x
- [ ] Nightly

### Current Behavior

All ion-tab-buttons in my case are rendered using v-for.
tabState.activeTab and tabState.tabs are empty.

Found similar issue, seems it has been fixed in previos version, but problem still appears:
https://github.com/ionic-team/ionic-framework/issues/22847

image

ion-tab-button click causes an error:
image

### Expected Behavior

ion-tab-button click should push to another route

### Steps to Reproduce

Just use v-for on ion-tab-button

ion-tabs:
```





import { IonTabBar, IonTabs, IonRouterOutlet } from '@ionic/vue';
import TabEntity from '@/components/tabs/tab.entity';

export default {
name: 'TabsEntity',
components: { IonTabBar, IonTabs, IonRouterOutlet, TabEntity },
props: {
tabs: {
type: Array,
default: () => []
}
},
}

```

ion-tab-button:
```



{{ tab.value }}

import { IonTabButton, IonIcon, IonLabel } from '@ionic/vue'

export default {
name: 'TabEntity',
components: { IonTabButton, IonIcon, IonLabel },
props: {
tab: {
type: Object,
default: () => {}
},
},
}

```

### Code Reproduction URL

https://github.com/DoloreMentale/ion-tabs-bug-reproduction

### Ionic Info

Ionic:

Ionic CLI : 6.19.0 (C:\nvm\v16.14.0\node_modules\@ionic\cli)
Ionic Framework : @ionic/vue 6.2.6

Capacitor:

Capacitor CLI : 4.2.0
@capacitor/android : not installed
@capacitor/core : 4.2.0
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 1.7.0

System:

NodeJS : v16.14.0 (C:\Program Files\nodejs\node.exe)
npm : 8.7.0
OS : Windows 10

### Additional Information

_No response_

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.