ionic-team / ionic-team/ionic-framework
bug: vue, cannot wrap tab button in custom component
- 主要语言
- TypeScript
- 星标
- 52.7k
- 派生
- 13.3k
- 平均合并
- 1 天 15 小时
- 30 天内合并 PR
- 51
描述
### 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

ion-tab-button click causes an error:

### 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_
贡献指南
评估
这个 Issue 还没有评估数据。