Tabview 在 nativescript-vue 的第一个选项卡中不显示数据

Question

我在我的组件中放置了一个带有 2 个选项卡的 Tabview。首先，我从 API 加载一些数据并使用数据呈现 ListView。在另一个选项卡中，我显示了一些其他数据。

当组件首次显示时，API 中的数据未显示，我让 Tab 按 Tab 2，然后按 Tab 1，然后显示数据。

<template>
 <Page class="page">

   <TabView :selectedIndex="selectedIndex" 
    @selectedIndexChange="indexChange">

     <TabViewItem title="Tab 1">
            <StackLayout  orientation="vertical">

              <ListView height="90%" class="list-group"
                for="item in allCategories">
                <v-template>
                    <StackLayout class="list-group-item" 
                      orientation="horizontal">
                    <Image :src="item.imageURL" 
                     stretch="aspectFill" class="categoryImage" 
                     width="75" height="75">
                    </Image>
                    <Label class="categoryText" 
                     :text="item.element.groupText"/>
                    </StackLayout>
                </v-template>
              </ListView>

            </StackLayout> 
     </TabViewItem>
     <TabViewItem title="Tab 2">
        <Label text="Content for Tab 2" />
     </TabViewItem>
    </TabView>
</Page>
</template>




created: function () {"url").then(result => {
        result.data.forEach(element => {
            var imageURL = element.image.imageURL;
            this.allCategories.push({element, imageURL })
        });
    }, error => {
        console.log(error);
    });  
},

我希望在组件首次显示时显示数据，因为选项卡 1 被标记为正在显示的选项卡。有什么想法吗？

这是 playground 中的一个例子：https://play.nativescript.org/?template=play-vue&id=9Fk7AS&v=10

Answer 1

答案在我在 github 中为存储库提交的问题中：https://github.com/nativescript-vue/nativescript-vue/issues/515

只需更改：

<TabView :selectedIndex="selectedIndex" @selectedIndexChange="indexChange">

收件人：

<TabView>

Tabview 在 nativescript-vue 的第一个选项卡中不显示数据

Tabview not showing data in first tab in nativescript-vue

vue.js

nativescript

nativescript-vue