ionic-team / ionic-team/ionic-framework

bug: vue, cannot wrap tab button in custom component

未关闭
#25,919 5 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
package: vue type: bug
主要语言
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

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_

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。