Nativescript 选项卡视图更改不起作用

Question

我正在尝试手动更改选项卡，但我发现了一个错误。因此，即使标签索引已更改，标签也不会更改，因此基本上存在问题。我创建了一个 nativescript 游乐场应用程序，您可以在其中看到问题。 https://play.nativescript.org/?template=play-vue&id=VYfreA&v=2 要重现此问题，您只需按Field 选项卡，然后按Go to profile 按钮，然后再按一次field 选项卡，然后您将看到按下Go to profile 按钮时选项卡不会改变。

Answer 1

这不是错误，但绝对是预期的行为。您在selectedIndex 上的绑定是一种方式，您没有监控来自 TabView 的更改。

因此，当您通过点击选项卡标题导航到已归档选项卡时，selectedIndex 的值仍为 2。单击“转到配置文件”按钮将尝试将值更改为 2，但变量值已经为 2，因此更改检测不会发生。

要处理这种情况，您必须监听selectedIndexChange 事件并不断更新变量。

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