ionic-team / ionic-team/ionic-framework

bug: vue, cannot wrap tab button in custom component

Abierto
#25,919 5 comentarios 0 reacciones 0 asignados Ver en GitHub
package: vue type: bug
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

### 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_

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.