Nativescript tab view change doesn't work

Question

I'm trying to change tabs manually but I found a bug. So basically there is an issue when tabs don't change even when tab index has changed. I have created a nativescript playground app where you can see the problem. https://play.nativescript.org/?template=play-vue&id=VYfreA&v=2 To recreate the issue, all you have to do is press Field tab, then Go to profile button then again field tab and then you will see when pressing Go to profile button tab will not change.

Manoj Manoj · Accepted Answer · 2019-08-01T13:28:07

That's not a bug but absolutely an expected behaviour. Your binding on selectedIndex is one way, you are not monitoring changes from the TabView.

So when you navigated to Filed tab by tapping on tab header, value of selectedIndex remains 2. Clicking on GO TO PROFILE button would try to change the value to 2, but the variable value is already 2 so the change detection won't happen.

To handle this scenario, you will have to listen for selectedIndexChange event and update the variable constantly.

            <TabView :selectedIndex="selectedIndex" @selectedIndexChange="selectedIndex = $event.value">
                <TabViewItem title="home">
                    <StackLayout>
                        <Button text="go to fields" @tap="selectedIndex = 1"></Button>
                    </StackLayout>
                </TabViewItem>

                <TabViewItem title="Field">
                    <StackLayout>
                        <Button text="go to profile" @tap="selectedIndex = 2"></Button>
                    </StackLayout>
                </TabViewItem>

                <TabViewItem title="profile">
                    <StackLayout>
                        <Button text="go to home" @tap="selectedIndex = 0"></Button>
                    </StackLayout>
                </TabViewItem>
            </TabView>

Nativescript tab view change doesn't work

1 Answers